STUDY-响应式

响应化是MVVM模式中的一个重要组成部分,对数据的操作有了响应才有下一步根据响应做对应操作的机会

对象属性响应化处理

// 对象属性响应化处理
function reactiveObject(obj, key, val) {
  // 对象的值也是对象的情况进行递归操作
  observe(val);
  Object.defineProperty(obj, key, {
    get() {
      console.log("get 属性: ", key, " 值: ", val);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        // 直接赋值对象的情况需要重新响应化处理
        observe(newVal);
        console.log("set 属性: ", key, " 值: ", newVal);
        newVal = val;
      }
    },
  });
}

数组响应化处理

// 数组响应化处理
function reactiveArray() {
  // 获取原始数组原型
  const orgArrayProto = Array.prototype;
  // 备份数组原型并重写方法
  const reactiveArrayProto = Object.create(orgArrayProto);
  ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach(
    (method) => {
      reactiveArrayProto[method] = function() {
        // 执行数组原始方法
        orgArrayProto[method].apply(this, arguments);
        // 触发变更通知
        console.log("数组操作: method: ", method, " arguments: ", arguments);
      };
    }
  );
  return reactiveArrayProto;
}

执行统一响应化处理

// 执行统一响应化处理
function observe(obj) {
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  if (Array.isArray(obj)) {
    //执行数组响应化
    //覆盖array原型
    obj.__proto__ = reactiveArray();
    for (let i = 0; i < obj.length; i++) {
      observe(obj[i]);
    }
  } else {
    //执行对象响应化(循环遍历将每个属性都进行响应化)
    Object.keys(obj).forEach((key) => reactiveObject(obj, key, obj[key]));
  }
}

TEST

const person = {
  name: "小明",
  age: 18,
  email: ["111@qq.com"],
  address: { city: "bj" },
};
 
observe(person);
//1. 直接操作对象属性情况
//2. 操作对象嵌套对象情况
//3. 直接赋值对象给属性并读取的情况
//4. 数组7中操作情况