Vue响应式原理：数据劫持与依赖收集-优快云博客

本文链接：https://blog.youkuaiyun.com/Taojia9958/article/details/125209088

本文详细介绍了Vue.js的响应式原理，包括数据劫持通过`Object.defineProperty`和发布订阅者模式实现，以及如何处理对象和数组类型的响应式。在数据劫持中，使用`defineRective`进行属性的get和set操作，对于数组则重写了其七个方法。依赖收集阶段，通过Dep对象和Watcher对象建立联系，确保数据变化时能通知到相关视图进行更新。总结了Observer、Watcher和Dep对象的角色和它们在整个响应式系统中的工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 sync的使用 vue2的响应式原理

原理：通过数据劫持 defineProperty + 发布订阅者模式，当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者，这里在编译模板时就会初始化每一属性的 watcher，在数据发生更新后调用 set 时会通知发布者 notify 通知对应的订阅者做出数据更新，同时将新的数据根性到视图上显示。
缺陷：只能够监听初始化实例中的 data 数据，动态添加值不能响应，要使用对应的 Vue.set()。

1.第一步：对数据做数据劫持：
1.1对象类型做数据劫持
使用 Object.defineProperty 方法添加对象，重写了原有的 get 和 set 方法，这就是数据劫持。
defineRective 文件通过封装 Object.defineProperty 方法，把浅层次的对象中的某个数据变成具有 get 和 set 方法的属性。因为有闭包的存在，所以不需要临时变量进行周转了。
接下来是深层次：用递归侦测对象的全部属性

八个 JS 文件互相调用(文件代码，放在文章下方)：
index.js：入口文件
observe.js：用于判断某一属性是否为对象或者数组，因为 typeof(array) 返回的也是 object，算是一个局限性。普通数据就直接 return，对象(数组)就给它调用 new Observer
Observer.js：对传入的属性做类型判断，然后分别转化为可被监测的属性。
def.js：为属性添加 ob 属性，做标记，而且可以通过