由于 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
它允许被作为一个单独的包,进行使用。