模拟数据监听

    <script>
      let data = {
        name: "测试",
        address: "北京",
      };
      // 创建一个监视的实例对象，用于监视data中属性的变化
      const obs = new Observer(data);
      console.log(obs);
      // 准备一个vm实例对象
      let vm = {};
      vm._data = data = obs;
      console.log(vm);

      function Observer(obj) {
        // 汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj);
        // 遍历
        keys.forEach((k) => {
          Object.defineProperty(this, k, {
            get() {
              return obj[k];
            },
            set(val) {
              obj[k] = val;
            },
          });
        });
      }
    </script>

Vue.set()方法

用法：向响应式的对象中添加一个属性，且新增的属性同样是响应式的，可触发视图更新

对象不能为Vue实例，且不能为Vue实例的根数据对象

            addSex(){
                // 方法一：Vue.set
                Vue.set(this.student,'sex','男');
                // 方法二：Vue.$set
                this.$set(this.student,'sex','男');
            }

Vue监听数据的原理（数组）

将被侦听的数组的变更方法进行包裹，因此其触发的是包裹过的方法，可引起视图更新

包括的方法有：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

数据监听总结

数据侦听原理

1. Vue会侦听data中所有层次的数据

2. 实现方法（对象）

   通过setter实现侦听，且在new Vue时就传入需侦听的数据

   1. 对象中追加的属性，Vue默认不做响应式处理
   2. 如需对追加属性做响应式处理，使用如下API
      • Vue.set（target，propertyName/index，value）或
      • vm.set（target，propertyName/index，value）

3. 实现方法（对象）

   通过包裹数组更新元素的方法实现，其本质是进行如下操作：

   1. 调用元素对应方法对数组进行更新
   2. 重新解析模版，更新视图

4. Vue中更改数组中某一元素的方法

   1. 使用已有API
   2. Vue.set（）或vm.$set（）

**注：**vue.set（）和vm.$set（）不能直接对根对象添加属性