vue2/vue3---- 响应式原理

 1.当视图调用data中的数据时 get方法就会记录使用该数据的节点

2.当我们修改数据是就会调用set方法，通知观察者让我们的页面进行视图的渲染更新

Vue2和Vue3响应式原理（十六） - 掘金

Vue3响应式原理变更_哔哩哔哩_bilibili

//更新视图
function updateView() {
  console.log("视图更新");
}

function observer(target) {
  // 不是对象或数组
  if (typeof target !== "object" || target === null) {
    return target;
  }

  //重新定义各个属性 (for in 也能遍历数组)
  for (let key in target) {
    defineReactive(target, key, target[key]);
  }
}

function defineReactive(target, key, value) {
  //深度监听
  observer(value);

  //核心API
  Object.defineProperty(target, key, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue !== value) {
        //  设置新值 value在闭包能保证下次触发get获取上次设置的值
        value = newValue;
        //深度监听
        observer(newValue);
        // 更新视图
        updateView();
      }
    },
  });
}

//准备数据
const obj = {
  name: "云牧",
  age: 18,
  info: {
    city: "长沙", //需要深度监听
  },
};

observer(obj);

obj.name = "云溪";
obj.age = 16;
obj.info.city = "怀化"; // 深度监听
obj.age = { num: 21 }; // 深度监听新增对象属性
console.log(obj.age.num)
// obj.x = 100; // 新增属性  监听不到  所以有Vue.set
// delete obj.name; // 删除属性 监听不到 所以有Vue.delete

vue3 proxy

1.p是person的代理 我们修改代理对象p会直接响应到person上(new proxy没有传第二个参数时，如果传了第二个参数，就需要在代码中手动修改person对象)

2.proxy 新增了deleteproperty方法来监听删除熟悉操作，同时set也能监听追加熟悉的操作