防Vue系列-10 扩展deepProperty函数,拦截数组的方法

Vue解析总纲
上一节 防Vue系列-09 deepProperty封装Object.defineProperty
创建拦截数组的一个代理方法

  // 要拦截的数组方法
   let arrs = [
      "push",
      "pop",
      "shift",
      "unshift",
      "reserve",
      "splice",
      "sort",
   ];
   // 获取数组对象
   let arrays = Object.create(Array.prototype);
   // 在原型数组中添加拦截器
   arrs.forEach((element) => {
   	  //做一层proxy处理
      arrays[element] = function () {
          //在这里对数据进行响应式化
          for (let index = 0; index < arguments.length; index++) {
          	//push进来的进行响应式
            deepProperty(arguments[index]);
          }
          //返回响应Array原型
          return Array.prototype[element].apply(this, arguments);
       };
   });
   

• 接下来就在deepProperty函数添加一句话

     // 对象遍历
      function deepProperty(o) {
        let keys = Object.keys(o);
        for (let index = 0; index < keys.length; index++) {
          let key = keys[index];
          let val = o[key];
          if (Array.isArray(val)) {
            // ======数值响应式start======
            val.__proto__ = arrays;
 			// ======数值响应式end======
            for (let j = 0; j < val.length; j++) {
              deepProperty(val[j]);
            }
          } else {
            deepCreateProperty(o, key, val, true);
          }
        }
      }
      
/**
*@params target:any
*@params key:String
*@params val:null
*@params enumerable:boolean
*/
      //将数据转换成响应式
      function deepCreateProperty(target, key, val, enumerable) {
        // 判断val 是否是对象
        if (typeof val === "object" && val !== null && !Array.isArray(val)) {
          // 是对象就递归
          deepProperty(val);
        }
        Object.defineProperty(target, key, {
          enumerable: !!enumerable, //默认不传参  undefinde false
          get() {
            console.log("得到val");
            return val;
          },
          set(newVal) {
            console.log("改变val");
            val = newVal;
          },
        });
      }