Vue 检测数据

主要逻辑类似：

<script>
    let data = {
        name: 'name',
        address: 'address',
    };

    // 创建了一个监视对象，监视data属性的变化
    const obs = new Observer(data);

    let vm = {};
    vm._data = data = obs;

    function Observer(obj) {
        // 汇总对象所有的属性形成一个数组
        const keys = Object.keys(data);
        // 遍历
        keys.forEach((k) => {
            Object.defineProperty(this, k, {
                get(){
                    return obj[k];
                },
                set(val) {
                    obj[k] = val;
                    console.log(`数据${k}被修改，接下来解析模板，生成虚拟DOM，执行diff算法。。。`);
                },
            })
        })
    }
</script>

但是vue实现的更加强大复杂

1. 通过数据代理实现 vm.name='xxx' 而不必 vm._data.name='xxx'
2. 通过递归使得对于对象的属性也有 get set 方法

Vue.set()

代码运行时试图向对象中添加属性，vm._data.student.age=18添加的数据没有 get set 函数。

运行时添加对象属性应当使用 Vue.set(target, key, val)  例如 Vue.set(vm._data.persons, 'num',  3)简化方式 vm.$set(vm.persons, 'num', 3)

但是这个函数只能为 data 中的对象实例添加属性，不能为 vm._data 添加属性，即不能新增变量。

Vue 检测数据的数组处理

js中修改数组成员的函数：

1. push
2. pop
3. shift
4. unshift
5. splice
6. sort
7. reverse

通过以上7个函数操作数组就有响应式结果。在vue中数组的 prototype 上有一个push等方法，它调用了原生Array的方法并进行了一些其他操作。这称为包装。

总结

1. vue 会监测data中所有层次的数据
2. 如何监测数据？
   1. 通过setter 实现监视，且要在 new Vue 时传入要监测的数据
   2. 对象中后追加属性，Vue默认不做响应式处理
   3. 如需添加属性做响应式，使用以下 API
      Vue.set(target, propertyName/index, value)
      vm.$set(target, propertyName/index, value)
3. 如何监测数组中数据
   1. 通过包裹数组更新元素的方法实现，本质就是做两件事
   2. 调用原生对应的方法对数组更新
   3. 重新解析模板，进而更新页面
4. 在Vue修改数组中某个元素一定要使用以下方法
   1. 7个修改数组的api方法
   2. Vue.set() 或 vm.$set()

不能给 vm 或 vm 的根数据对象添加属性