持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
前言
这篇文章主要是讲 Vue3 的响应式原理，以及与 Vue2 的响应式原理有什么区别和优点。
Vue2 响应式原理
在讲 Vue3 的响应式原理前，我们先回顾一下 Vue2 的响应式原理，然后再作对比。
Vue2 的响应式原理依靠的是方法 Object.defineProperty。在初始化时，Vue2 会把 data 中的属性通过 Object.defineProperty 进行代理，
劫持 getter/setter，有修改时再通过 getter/setter 派发更新。
Vue2 响应式处理的地方在 observer 模块下，observer 负责将 data 转换成响应式，并处理 data 的 getter 及 setter。
- 当 data 中的属性被访问时，触发 getter，然后 Wather 会收集依赖 Dep。
- 当 data 中的属性修改时，触发 setter，setter 中会触发 dep 依赖的 notify 函数来派发更新，由此实现数据的响应监听。
Vue3 响应式原理
Vue3 的响应式原理基于 Proxy 代理，Proxy 是不支持 IE 的，所以 Vue3 将完全放弃 IE 浏览器。
Proxy 对象能创建一个代理，从而劫持被代理对象的基本操作。其使用方法
/**
* target：被 Proxy 代理虚拟化的对象。
* handler：包含捕捉器的占位符对象，可译为处理器对象。
*/
const proxy = new Proxy(target, handler)
同样的，在 Proxy 的 set/get 进行依赖收集和派发更新。
和 Vue2 相比，有什么好处呢?
- 由于
Object.defineProperty是对指定的 key 生成 getter/setter 方法，如果这个 key 一开始不存在我们定义的对象上，而是后来才新增的，那响应式系统就无能为力了，所以在 Vue2 中无法检测对象的动态属性的添加或移除， 在Vue2 定义了 vm.$set 方法来弥补这个缺陷。 而 Proxy 是对整个对象进行代理，包括属性的添加和删除，所以就，没有了这个问题。 Object.defineProperty不能监听数组，而 Proxy 可以。Object.defineProperty只能监听get和set，而Proxy能拦截13种操作
小结
这篇简单介绍了Vue3响应式系统的原理和优点，下一篇我们看看Vue3中的具体实现代码。
