通过Proxy和Reflect实现vue的响应式原理

vue3通过Proxy+Reflect实现响应式，vue2通过defineProperty来实现

Proxy

Proxy是什么

Proxy是ES6中增加的类，表示代理。

如果我们想要监听对象的操作过程，可以先创建一个代理对象，之后所有对于对象的操作，都由代理对象来完成，代理对象可以监听到我们对于原对象进行了哪些操作。

Proxy怎么使用

Proxy是一个类，通过new关键字创建对象，传入原对象和处理监听的捕获器

const user = {
  name: 'alice'
}

const proxy = new Proxy(user, {})

console.log(proxy)
proxy.name = 'kiki'
console.log(proxy.name)
console.log(user.name)

对代理所作的操作，同样会作用于原对象

什么是捕获器

捕获器就是用来监听对于对象操作的方法

const user = {
  name: 'alice',
  age: 18
}
const proxy = new Proxy(user, {
  get: function(target, key){
    console.log(`调用${key}属性的读取操作`)
    return target[key]
  },
  set: function(target, key, value){
    console.log(`调用${key}属性的设置操作`)
    target[key] = value
  }
})
proxy.name = 'kiki'
console.log(proxy.age)

以上get、set是捕获器中常用的两种，分别用于对象数据的“读取”操作和“设置”操作

有哪些捕获器

Proxy里对应捕获器与普通对象的操作和定义是一一对应的

1. handler.getPrototypeOf()
   
   Object.getPrototypeOf 方法的捕捉器。

2. handler.setPrototypeOf()
   
   Object.setPrototypeOf 方法的捕捉器。

3. handler.isExtensible()
   
   Object.isExtensible 方法的捕捉器。

4. handler.preventExtensions()
   
   Object.preventExtensions 方法的捕捉器。

5. handler.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor 方法的捕捉器。

6. handler.defineProperty()
   
   Object.defineProperty 方法的捕捉器。

7. handler.has()
   
   in 操作符的捕捉器。

8. handler.get()
   
   属性读取操作的捕捉器。

9. handler.set()
   
   属性设置操作的捕捉器。

10. handler.deleteProperty()
    
    delete 操作符的捕捉器。

11. handler.ownKeys()
    
    Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

12. handler.apply()
    
    函数调用操作的捕捉器。

13. handler.construct()
    
    new 操作符的捕捉器。

将这些捕获器以及对应的对象操作写在了以下示例中

const user = {
  name: "alice",
  age: 18
};
const proxy = new Proxy(user, {
  get(target, key) {
    console.log("执行了get方法");
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    console.log("执行了set方法");
  },
  has(target, key) {
    return key in target;
  },
  deleteProperty(target, key){
    console.log('执行了delete的捕获器')
    delete target[key]
  },
  ownKeys(target){
    console.log('ownKeys')
    return Object.keys(target)
  },
  defineProperty(target, key, value){
    console.log('defineProperty', target, key, value)
    return true
  },
  getOwnPropertyDescriptor(target, key){
    return Object.getOwnPropertyDescriptor(target, key)
  },
  preventExtensions(target){
    console.log('preventExtensions')
    return Object.preventExtensions(target)
  },
  isExtensible(target){
    return Object.isExtensible(target)
  },
  getPrototypeOf(target){
    return Object.getPrototypeOf(target)
  },
  setPrototypeOf(target, prototype){
    console.log('setPrototypeOf', target, prototype)
    return false
  }
});

console.log(proxy.name);
proxy.name = "kiki";
console.log("name" in proxy);
delete proxy.age
console.log(Object.keys(proxy))
Object.defineProperty(proxy, 'name', {
  value: 'alice'
})
console.log(Object.getOwnPropertyDescriptor(proxy, 'name'))
console.log(Object.preventExtensions(proxy))
console.log(Object.isExtensible(proxy))
console.log(Object.getPrototypeOf(proxy))
Reflect.setPrototypeOf(proxy, {})

通过捕获器去监听对象的修改、查询、删除等操作

以上捕获器中只有apply和constructor是属于函数对象的

function foo(){}

const proxy = new Proxy(foo, {
  apply: function(target, thisArg, args){
    console.log('执行proxy的apply方法', target, thisArg, args)
    return target.apply(thisArg, args)
  },
  construct: function(target, argArray){
    console.log('执行proxy的construct方法',target, argArray)
    return new target()
  }
})

proxy.apply({}, [1,2])
new proxy('alice', 18)

apply方法执行apply捕获器，new操作执行constructor捕获器

Reflect

Reflect是什么

Reflect也是ES6新增的一个API，表示反射。它是一个对象，提供了很多操作对象的方法，类似于Object中的方法，比如 Reflect.getPrototypeOf 和 Object.getPrototypeOf。

早期操作对象的方法都是定义在Object上，但Object作为构造函数，直接放在它身上并不合适，所以新增Reflect对象来统一操作，并且转换了对象中in、delete这样的操作符

Reflect中有哪些方法

Reflect中的方法与Proxy中是一一对应的

1. Reflect.apply(target, thisArgument, argumentsList)
   
   对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似。

2. Reflect.construct(target, argumentsList[, newTarget])
   
   对构造函数进行 new 操作，相当于执行 new target(...args)。

3. Reflect.defineProperty(target, propertyKey, attributes)和 Object.defineProperty() 类似。如果设置成功就会返回 true

4. Reflect.deleteProperty(target, propertyKey)
   
   作为函数的delete操作符，相当于执行 delete target[name]。

5. Reflect.get(target, propertyKey[, receiver])
   
   获取对象身上某个属性的值，类似于 target[name]。

6. Reflect.getOwnPropertyDescriptor(target, propertyKey)
   
   类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符,  否则返回 undefined.

7. Reflect.getPrototypeOf(target)
   
   类似于 Object.getPrototypeOf()。

8. Reflect.has(target, propertyKey)
   
   判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。

9. Reflect.isExtensible(target)
   
   类似于 Object.isExtensible().

10. Reflect.ownKeys(target)
    
    返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable影响).

11. Reflect.preventExtensions(target)
    
    类似于 Object.preventExtensions()。返回一个Boolean。

12. Reflect.set(target, propertyKey, value[, receiver])
    
    将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。

13. Reflect.setPrototypeOf(target, prototype)
    
    设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true。

将之前通过Proxy设置代理的对象操作全都变为Reflect

const user = {
  name: "alice",
  age: 18
};
const proxy = new Proxy(user, {
  get(target, key) {
    console.log("执行了get方法");
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    Reflect.set(target, key, value)
    console.log("执行了set方法");
  },
  has(target, key) {
    return Reflect.has(target, key)
  },
  deleteProperty(target, key){
    Reflect.deleteProperty(target, key)
  },
  ownKeys(target){
    console.log('ownKeys')
    return Reflect.ownKeys(target)
  },
  defineProperty(target, key, value){
    console.log('defineProperty', target, key, value)
    return true
  },
  getOwnPropertyDescriptor(target, key){
    return Reflect.getOwnPropertyDescriptor(target, key)
  },
  preventExtensions(target){
    console.log('preventExtensions')
    return Reflect.preventExtensions(target)
  },
  isExtensible(target){
    return Reflect.isExtensible(target)
  },
  getPrototypeOf(target){
    return Reflect.getPrototypeOf(target)
  },
  setPrototypeOf(target, prototype){
    console.log('setPrototypeOf', target, prototype)
    return false
  }
});
console.log(proxy.name);
proxy.name = "kiki";
console.log(Reflect.has(proxy, 'name'));
delete proxy.age
console.log(Reflect.ownKeys(proxy))
Reflect.defineProperty(proxy, 'name', {
  value: 'alice'
})
console.log(Reflect.getOwnPropertyDescriptor(proxy, 'name'))
console.log(Reflect.preventExtensions(proxy))
console.log(Reflect.isExtensible(proxy))
console.log(Reflect.getPrototypeOf(proxy))
Reflect.setPrototypeOf(proxy, {})

实现的效果是完全一致的

Reflect的receiver

Reflect中在进行get/set捕获器操作的时候，还有一个入参是receiver，指的是代理对象，用于改变this指向

const user = {
  _name: 'alice',
  get name(){
    return this._name
  },
  set name(value){
    this._name = value
  }
}
const proxy = new Proxy(user, {
  get: function(target, key, receiver){
    console.log('get操作', key)
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, receiver){
    console.log('set操作', key)
    return Reflect.set(target, key, receiver)
  },
})
console.log(proxy.name)
proxy.name = 'kiki'

(1) 如果没有receiver，那么当修改name属性时，objProxy先执行key为name时的get操作

(2) 然后代理到obj里的get方法，读取this的_name属性，此时的this是obj，会直接修改

obj._name，不会再经过objProxy

(3) 增加了receiver之后，执行obj的get方法，读取this的_name属性，此时this是proxy

对象，所以会再次到get的捕获器中

set操作同理

Reflect中的constructor

用于改变this的指向

function Person(){
}
function Student(name, age){
  this.name = name;
  this.age = age
}
const student = Reflect.construct(Student, ['aclie', 18], Person)

console.log(student)
console.log(student.__proto__ === Person.prototype)

此时创建的student对象虽然拥有Student的属性和方法，但是它的this指向Person

vue的响应式

通过以下步骤一步步实现响应式

1、定义一个数组收集所有的依赖

• 定义全局变量reactiveFns用来保存所有的函数
• 定义方法watchFn，入参为函数，代码体为将入参保存进全局变量中
• 修改对象的值，遍历全局变量，执行每一个函数

let user = {
  name: "alice",
};
let reactiveFns = [];
function watchFn(fn) {
  reactiveFns.push(fn);
}
watchFn(function () {
  console.log("哈哈哈");
});
watchFn(function () {
  console.log("hello world");
});
function foo(){
  console.log('普通函数')
}
user.name = "kiki";
reactiveFns.forEach((fn) => {
  fn();
});

此时通过响应式函数 watchFn 将所有需要执行的函数收集进了数组中，然后当变量的值发生变化时，手动遍历执行所有的函数

2.收集依赖类的封装

以上只有一个数组来收集对象的执行函数，真实情况下，不止一个对象需要对操作状态进行监听，需要监听多个对象就可以使用类。

• 定义Depend类，给每个实例对象提供addDepend方法用于添加绑定的方法， notify方法用于执行该实例的reactiveFns属性上添加的所有方法
• 封装响应式函数watchFn，函数里调用实例对象的appDepend方法
• 修改对象的值，调用实例对象的notify方法

class Depend {
  constructor() {
    this.reactiveFns = [];
  }
  addDepend(fn) {
    this.reactiveFns.push(fn);
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}
let user = {
  name: "alice",
  age: 18,
};
const depend = new Depend();
function watchFn(fn) {
  depend.addDepend(fn);
}
watchFn(function(){
  console.log('啦啦啦啦啦啦')
})
watchFn(function(){
  console.log('hello hello')
})
function foo(){
  console.log('foo')
}
user.name = 'kiki'
depend.notify()

将收集操作和依次执行函数的方法都定义在类中

3.自动监听对象的变化

以上仍然是我们自己手动调用执行函数的方法，以下自动监听

• 在通过类收集依赖的基础上，增加Proxy来定义对象，Reflect执行对象的方法
• 在set方法中执行实例对象depend的notify方法
• 修改代理proxy属性的值

class Depend {
  constructor() {
    this.reactiveFns = [];
  }
  addDepend(fn) {
    this.reactiveFns.push(fn);
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}
let user = {
  name: "alice",
  age: 18,
};
const depend = new Depend();
function watchFn(fn) {
  depend.addDepend(fn);
}
const proxy = new Proxy(user, {
  get: function (target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    Reflect.set(target, key, value, receiver);
    depend.notify();
  },
});
watchFn(function () {
  console.log("name变化执行的函数");
});
watchFn(function () {
  console.log("age变化执行的函数");
});
function foo() {
  console.log("foo");
}
proxy.name = "kiki";
proxy.age = 20;

此时的问题是，修改了对象的任一属性，所有的函数都会调用，没有按照一一对应的关系来保存对象的属性和对应的函数

4、收集依赖的管理

• 定义weakMap用来管理对象，[对象名, map]，定义map保存 [对象的属性名, 实例对象depend]
• 定义获取depend实例对象的方法getDepend，先从weakMap中获取map，如果没有就new 一个，再从map中获取depend对象，如果没有再new一个
• 在set方法中获取depend对象，调用notify方法

class Depend {
  constructor() {
    this.reactiveFns = [];
  }
  addDepend(fn) {
    this.reactiveFns.push(fn);
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}
let user = {
  name: "alice",
  age: 18,
};
const depend = new Depend();
function watchFn(fn) {
  depend.addDepend(fn);
}
const weakMap = new WeakMap()
function getDepend(obj, key){
  let map = weakMap.get(obj)
  if(!map){
    map = new Map()
    weakMap.set(obj, map)
  }
  let depend = map.get(key)
  if(!depend){
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}
const proxy = new Proxy(user, {
  get: function (target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    Reflect.set(target, key, value, receiver);
    const depend = getDepend(target, key)
    depend.notify();
  },
});
watchFn(function () {
  console.log("name变化执行的函数");
});
watchFn(function () {
  console.log("age变化执行的函数");
});
function foo() {
  console.log("foo");
}
proxy.name = "kiki";
proxy.age = 20;

此时proxy对应的depend是没有值的，所以此时没有任何打印的数据

5、正确管理收集的依赖

• 全局定义变量activeReactiveFn指向watchFn传入的方法，执行传入的方法，再将 activeReactiveFn指向null
• watchFn传入时便会被执行一次，用于代码对象的get方法中收集依赖
• Depend类中使用addDepend方法无需传参，直接使用全局的activeReactiveFn
• get方法中通过getDepend获取depend，并使用addDepend方法，收集依赖

class Depend {
  constructor() {
    this.reactiveFns = [];
  }
  addDepend(fn) {
    this.reactiveFns.push(fn);
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}
let user = {
  name: "alice",
  age: 18,
};
let activeReactiveFn = null;
function watchFn(fn) {
  activeReactiveFn = fn;
  fn();
  activeReactiveFn = null;
}
const weakMap = new WeakMap();
function getDepend(obj, key) {
  let map = weakMap.get(obj);
  if (!map) {
    map = new Map();
    weakMap.set(obj, map);
  }
  let depend = map.get(key);
  if (!depend) {
    depend = new Depend();
    map.set(key, depend);
  }
  return depend;
}
const proxy = new Proxy(user, {
  get: function (target, key, receiver) {
    const depend = getDepend(target, key)
    depend.addDepend(activeReactiveFn)
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    Reflect.set(target, key, value, receiver);
    const depend = getDepend(target, key);
    depend.notify();
  },
});
watchFn(function () {
  console.log(proxy.name, "name变化执行的函数");
  console.log(proxy.name, "name变化执行的函数 again");
});
watchFn(function () {
  console.log(proxy.age, "age变化执行的函数");
});
function foo() {
  console.log("foo");
}
proxy.name = "kiki";

此时已经能够根据属性值的变化而执行对应的函数了，但同一个函数会执行两次

6、重构

• 当函数中调用两次proxy的属性时，会将同一个函数添加到数组中两次，所以将 reactiveFn数据结构由数组变成set
• 定义reactive函数用来收集处理需要代理及响应式的对象

let activeReactiveFn = null;
class Depend {
  constructor() {
    this.reactiveFns = new Set();
  }
  addDepend() {
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn);
    }
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}
function watchFn(fn) {
  activeReactiveFn = fn;
  fn();
  activeReactiveFn = null;
}
const weakMap = new WeakMap();
function getDepend(obj, key) {
  let map = weakMap.get(obj);
  if (!map) {
    map = new Map();
    weakMap.set(obj, map);
  }
  let depend = map.get(key);
  if (!depend) {
    depend = new Depend();
    map.set(key, depend);
  }
  return depend;
}
function reactive(obj){
  return new Proxy(obj, {
    get: function (target, key, receiver) {
      const depend = getDepend(target, key);
      depend.addDepend();
      return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      const depend = getDepend(target, key);
      depend.notify();
    },
  });
}
const user = reactive({
  name: "alice",
  age: 18,
})
const info = reactive({
  message: 'hello'
})
watchFn(function () {
  console.log(user.name, "name变化执行的函数");
  console.log(user.name, "name变化执行的函数 again");
});
watchFn(function () {
  console.log(user.age, "age变化执行的函数");
});
watchFn(function(){
  console.log(info.message, "message发生变化了")
})
function foo() {
  console.log("foo");
}
user.name = "kiki";
user.age = 20;
info.message = 'ooo'

此时已实现vue3的响应式~

vue2的实现原理

vue2的实现就是将Proxy和Reflect替换成了Object.defineProperty和Object本身的一些方法

let activeReactiveFn = null;
class Depend {
  constructor() {
    this.reactiveFns = new Set();
  }
  addDepend() {
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn);
    }
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}
function watchFn(fn) {
  activeReactiveFn = fn;
  fn();
  activeReactiveFn = null;
}
const weakMap = new WeakMap();
function getDepend(obj, key) {
  let map = weakMap.get(obj);
  if (!map) {
    map = new Map();
    weakMap.set(obj, map);
  }
  let depend = map.get(key);
  if (!depend) {
    depend = new Depend();
    map.set(key, depend);
  }
  return depend;
}
function reactive(obj){
  Object.keys(obj).forEach(key=>{
    let value = obj[key]
    Object.defineProperty(obj, key, {
      get: function () {
        const depend = getDepend(obj, key);
        depend.addDepend();
        return value
      },
      set: function (newValue) {
        value = newValue
        const depend = getDepend(obj, key);
        depend.notify();
      },
    })
  })
  return obj
}
const user = reactive({
  name: "alice",
  age: 18,
})
const info = reactive({
  message: 'hello'
})
watchFn(function () {
  console.log(user.name, "name变化执行的函数");
  console.log(user.name, "name变化执行的函数 again");
});
watchFn(function () {
  console.log(user.age, "age变化执行的函数");
});
watchFn(function(){
  console.log(info.message, "message发生变化了")
})
function foo() {
  console.log("foo");
}
user.name = "kiki";
user.age = 20;
info.message = 'ooo'

和上面实现的效果是一致的

以上就是通过Proxy和Reflect实现vue的响应式原理，关于js高级，还有很多需要开发者掌握的地方，可以看看我写的其他博文，持续更新中~