Vue3.0响应式原理

vue3 响应式是使用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。

proxy 是深度监听，所以可以监听对象和数组内的任意元素，从而可以实现视图实时更新。

总结响应式大致分为三个阶段:

• 初始化阶段：初始化阶段通过组件初始化方法形成对应的proxy对象，然后形成一个负责渲染的effect。

• get依赖收集阶段：通过解析template，替换真实data属性，来触发get,然后通过stack方法，通过proxy对象和key形成对应的deps，将负责渲染的effect存入deps。（这个过程还有其他的effect，比如watchEffect存入deps中 ）。

• set派发更新阶段：当我们 this[key] = value 改变属性的时候，首先通过trigger方法，通过proxy对象和key找到对应的deps，然后给deps分类分成computedRunners和effect,然后依次执行，如果需要调度的，直接放入调度。

Proxy只会代理对象的第⼀层，那么Vue3⼜是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过 reactive ⽅法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防⽌触发多次呢？

我们可以判断key是否为当前被代理对象target⾃身属性，也可以判断旧值与新值是否相等，只有满⾜以上两个条件之⼀时，才有可能执⾏trigger。