由于 2021 年 vue 已经升级了底层的所使用的API，所以要分版本讲原理

vue2

宏观上：vue2 的底层响应式主要依靠 Object.defineProperty , 做到对，单个数据源数据，存值和取值时，监听其状态的改变，依靠 发布者-订阅者模式，做到的。

vue3

宏观上：vue3 实际上与vue2 做响应式原理的思想上是保持一致的，将其 Object.defineProperty api 置换成了 Proxy API 进行处理,

proxy 带来的好处（在vue2中，需要对data 中的每一个数据，进行递归劫持，进行(get,set处理)，proxy 是运行时的，它只发生在，你当前需要对其值发生改变时，去响应式处理。所以一上来的性能消耗就没有了。）

其vue3 等同与重写vue2所有的代码，在优化方面下足了很多功夫，其模版的 优化更新，是react 目前jsx 设计太灵活，所不能拥有的

目前vue3 响应式的包单独分离为 @vue/reactivity 它允许被作为一个单独的包，进行使用。