防Vue系列-09 deepProperty封装Object.defineProperty

Vue解析总纲
上一节:防Vue系列-08 初步了解响应式原理Object.defineProperty

再次思考怎么将 obj 变成响应式

 var obj = {
    title: "英雄联盟",
    heros: [
          { name: "金克斯", arms: "枪炮" },
          { name: "蛮王", arms: "大刀"},
     ],
    map: {
          title: "小地图",
       },
    };

• 将上篇文章的Object.defineProperty函数封装成deepProperty(obj)

/**
*@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;
          },
        });
      }

/**
*@params o:Object
*/ 		
 	  // 对象遍历
      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)) {
            for (let j = 0; j < val.length; j++) {
              deepProperty(val[j]);
            }
          } 
          //不是数组
          else {
            deepCreateProperty(o, key, val, true);
          }
        }
      }
  //深度响应式
  deepProperty(obj);

总结虽然初始化时各个属性都会进行响应式化,但进行一下操作时,数据是不会进行响应式化的

• 思考当obj中的heros数组添加成员时怎么做到响应式？

 obj.heros.push({ name: "亚索", arms: "武士刀" });