Vue的响应式原理

响应式原理是Vue的核心特性之一。数据驱动视图,当我们修改数据的时候,视图随之而更新。

Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助proxy实现的。

Data通过Observer转换成getter/setter的形式来追踪变化。
当外界通过watcher读取数据时,会触发getter,从而将watcher添加到依赖中。
当数据发生变化时会触发setter,从而向Dep中的依赖(watcher)发送通知。watcher接收到通知之后,会向外界发送通知,变化通知到外界可能会触发视图更新,也可能触发用户的某个回调函数。

3.x与2.x的核心思想是一致的,只不过是数据劫持使用proxy而不是Object.definePropertyproxy相比Object.defineProperty在处理数组和新增删除属性响应式的处理上更加方便。

文章作者: qinwei
文章链接: https://qw-null.github.io/2022/08/08/Vue的响应式原理/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 QW's Blog