1.0 Vue2.0原理概述

1.变化监测： 主要是为了观察数据 明白哪些数据发生了改变

Vue采取的是"推"的方式，
数据状态改变 ------------- Vue核心获得信息 ------------ 向和数据绑定的依赖发送通知 --------------- 依赖进行DOM更新操作
每一个状态都绑定着许多依赖，每一个依赖都表示一个具体的DOM节点

Angular和React是"拉"的方式， 状态发生变化时，发送信号告诉框架核心，但是框架核心不知道具体是哪个变化了，只能通过暴力的比对来确定哪些DOM节点需要重新渲染。 Angular中使用脏检查流程，React中使用虚拟DOM。

// 测试 数据的变化监测
            let data = []
            function defineReactive(data, key, val) {
                Object.defineProperty(data, key, {
                    enumerable: true,
                    configurable: true,
                    get: function() {
                        console.log('获取数据')
                        return val
                    },
                    set: function(newVal) {
                        console.log("修改数据")
                        if (val === newVal) {
                            return
                        }
                        val = newVal
                    }
                })
            }
            defineReactive(data, '0', 'www')
            defineReactive(data, '1', 'ccc')
            console.log(data[0]) // 获取数据 www
            console.log(data[1]) // 获取数据 ccc
            data[0] = 5; //修改数据
            data[2] = 10; // 没有触发修改
            console.log(data[2]) // 10

2.收集依赖: 把用到数据的地方收集起来

监测数据实现了对数据状态改变的监测，同时我们需要知道，数据发生变化时，哪些地方使用了此数据
具体的思路是---先收集依赖，在使用数据时把使用数据的地方记录，等数据发生变化时，把收集好的依赖循环依次触发修改。
收集依赖的地方在getter

因此 总结v2的基本原理就是： 在getter中收集依赖(使用的时候触发get在此函数中收集)，在setter中触发修改依赖(在set函数中触发)