vue3响应式原理

vue3的响应式原理是基于proxy实现的，proxy用于创建一个对象的代理，从而实现基本操作的拦截和自定义，还用到了reflect，reflect接收第三个参数reciver，他代表谁在读取属性，能够在原始对象和代理对象之间建立响应联系，从而达到依赖收集的效果

proxy语法

const p = new Proxy(target, handler)

• target

• 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

• handler

• 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为

举例 handler.get()  方法用于拦截对象的读取属性操作。

语法

var p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});

响应式数据的基本实现

副作用函数值会产生副作用的函数，函数的执行会直接或间接影响其他函数的执行，这时我们说函数产生了副作用

当对对象进行读取操作时，触发track函数将副作用函数添加到桶中，当进行设置操作时，读取trigger函数把副作用函数从桶中取出并执行

proxy基本使用如下:

较为完善的响应系统

构建数据结构时，使用到WeakMap、Map、和Set

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名，WeakMap的key是弱引用，不影响垃圾回收器的工作，一旦表达式执行完毕，就会把key从内存中移除