vue2的响应式原理怎么实现？

XXXX_康康吖

已于 2023-07-07 10:09:00 修改

阅读量102

点赞数

分类专栏： vue.js面试题文章标签： vue.js javascript 前端

于 2023-07-07 08:25:52 首次发布

本文链接：https://blog.csdn.net/m0_68009075/article/details/131589010

版权

2 篇文章 0 订阅

订阅专栏

Vue 2 的响应式原理是通过 Object.defineProperty 这个 API 来实现的。下面是 Vue 2 响应式的基本原理解释：

数据劫持：在 Vue 初始化时，Vue 会遍历 data 中的所有属性，并使用 Object.defineProperty 把这些属性转化为 getter 和 setter。
Getter：在 getter 中，Vue 会收集对数据的依赖。当一个属性被读取时，会触发 getter，然后把对应的依赖 (Watcher) 添加到依赖列表中。
Setter：在 setter 中，Vue 会监听到属性的变化。当一个属性被赋新值时，会触发 setter，然后通知依赖列表中的 Watcher 执行更新。
依赖收集和触发更新：Watcher 这个机制用来收集依赖和触发更新。每个组件实例都会对应一个 Watcher 对象，用来管理该组件所依赖的属性。当一个组件中的数据被访问时，会触发对应的 getter，然后把该组件的 Watcher 添加到依赖列表中。当某个依赖的数据发生变化时，会触发对应的 setter，然后通知依赖列表中的所有 Watcher 执行更新操作。

通过这种方式，Vue 实现了响应式的数据绑定。当数据发生变化时，相关的组件会自动更新，并且更新只发生在需要更新的组件上，提高了性能。

需要注意的是，Vue 2 对象的响应式并不是递归的。只有在初始化时存在的属性才会被转换为响应式属性，新添加的属性或删除的属性不会被响应式监听。如果需要对动态添加的属性进行响应式处理，则可以使用 Vue.set 或 this.$set 方法来实现。

关注