Vue2响应式基础

总所周知：Vue2响应式利用的是Object.defineProperty()来实现对对象的监听！

缺点：

1. 无法监听到数组下标的变化，通过数组下标添加元素，不能实时响应数据。
2. 无法检测到对象属性的新增或删除。

示范仿写v2响应式：

Object.defineProperty()里面传入的参数解析。

1. 需要监听的对象。
2. 监听对象里面的属性值
3. 传入的是一个对象{}，在{}里面进行对属性的设置，比如set、get、修改，删除，不可遍历等

    <script>
      let obj = {
        name: "小明",
        age: 18,
        moneny: 96999,
      };
      // 利用Object.keys()先获取所有的属性名或键
      let objKes = Object.keys(obj);
      //   遍历这个数组属性名，在里面循环的创建Object.defineProperty()对这个对象里面每个属性进行监听！
      for (let key of objKes) {
        // console.log(obj[keys]);//获取到对象里面每一个属性值
        let value = obj[key];
        // 循环的给每个属性名都添加一个响应式
        //   1.属性所在的对象
        //   2.属性的名字
        //   3.一个描述符对象【比如：get、set、对属性值的设置，可以被修改嘛，可以被获取嘛，可以被遍历嘛，等等】
        Object.defineProperty(obj, key, {
          // set:监听每一个获取到的新值，比如修改了obj的某个属性
          set: function (newValue) {
            console.log("监听：给某个属性名修改了新的值", newValue);
            value = newValue;
          },
          get: function () {
            console.log("监听到有人读取的这个属性名的值了");
            return value;
          },
        });
      }
    </script>