【vue】vue响应式原理

vue响应式原理

vue2的响应式原理

vue2对对象类型的监听是通过Object.defineProperty实现的，给想要实现响应式的数据对象每个属性加上get,set方法，以实现数据劫持的操作。而对数组类型的监听是通过重写数组的方法实现的。

Object.defineProperty的定义见这里：Object.defineProperty

模拟vue2响应式实现

  // 源数据
  const person = {
    name: "张三",
    age: 18,
  };

  let p = {};
  Object.defineProperty(p, "name", {
    configurable: true,
    get() {
      console.log("获取了name");
      return person.name;
    },
    set(name) {
      console.log("修改了name"); // 模拟复杂的视图变动的代码
      person.name = name;
    },
  });
  Object.defineProperty(p, "age", {
    configurable: true,
    get() {
      console.log("获取了age");
      return person.age;
    },
    set(age) {
      console.log("修改了age");
      person.age = age;
    },
  });

调用结果：

存在问题:

1. 对象类型不能监听到新增/删除属性的变动
2. 数组类型不能监听到直接通过下标修改的变动

addSex/deleteName/deleteName点击没反应，但实际数据有修改

针对以上问题，vue2也提出一些api处理：

1. this.$set/Vue.set:修改/新增属性的监听
2. $delete/Vue.delete:删除属性的监听

所以，虽然vue2在响应式数据有些问题，但也提出了解决方案，并不是一无是处。

vue3的响应式原理

在说明vue3的响应式原理前先了解window的两个内置对象
链接在这：
Proxy ：Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Reflect：Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。

Proxy

vue3是通过Proxy来实现响应式的,大致代码如下：

  // 源数据
  const person = {
    name: "张三",
    age: 18,
    hobby: ["吃饭", "睡觉", "打豆豆"],
  };

  const p = new Proxy(person, {
    get(target, property, receiver) {
      console.log(`获取了${target}的${property}`);
      return target[property];
    },
    set(target, property, value, receiver) {
      console.log(`修改了${target}的${property}为${value}`);
      target[property] = value;
    },
    deleteProperty(target, property, receiver) {
      return delete target[property];
    },
  });

target是源对象, property是属性, receiver是代理对象
实际上重写了Proxy的get/set/deleteProperty方法，实现对对象属性的增删改查

Reflect

ECMA组织正在把Object上的一些象defineProperty()之类的方法有用的方法往Reflect上迁移，vue3响应式实现也用到Reflect

把上面的代码改造一下：

  const p = new Proxy(person, {
    get(target, property, receiver) {
      console.log(`获取了${target}的${property}`);
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      console.log(`修改了${target}的${property}为${value}`);
      Reflect.set(target, property, value, receiver);
    },
    deleteProperty(target, property) {
      return Reflect.deleteProperty(target, property);
    },
  });