vue 的响应式系统通过依赖追踪实现自动更新视图。1. 数据劫持：vue 2 使用 object.defineproperty，vue 3 使用 proxy，使数据在被访问或修改时可被观测；2. 依赖收集：当数据被读取时，如在模板中使用 {{ message }}，当前 watcher 会被记录到该数据的依赖列表中；3. 派发更新：数据变化时触发 setter 或 proxy 的 set，通知所有依赖的 watcher 异步批量更新。此外，数组需用变异方法更新，新增属性需用 vue.set，深层响应则通过递归实现。掌握这三步机制，便能理解 vue 响应式系统的核心原理。
Vue 的响应式系统之所以能自动更新视图，关键就在于它能够追踪依赖。简单来说，当数据变化时，Vue 能知道哪些组件或计算属性需要重新渲染，这背后靠的就是依赖追踪机制。
那它是怎么做到的呢？我们来分几个角度看看。
数据劫持：让数据“可观测”
Vue 2 和 Vue 3 在实现上略有不同，但核心思想是一样的：对数据进行劫持，使其在被访问或修改时可以触发一些行为。
- 在 Vue 2 中，使用的是
Object.defineProperty来监听对象属性的变化。 - 在 Vue 3 中，使用了更现代的
Proxy，可以监听整个对象的操作，而不仅仅是某个属性。
一旦数据被访问（比如模板里用了 {{ message }}），Vue 就会记录下这个“谁”用到了这个数据，也就是建立一个依赖关系。
依赖收集：谁用了我？
依赖收集的过程其实就是在读取数据的时候，把当前正在执行的 watcher（观察者）记录下来。
举个例子：
data() {
return {
message: 'Hello Vue'
}
}
当组件渲染时，它会访问 message，这时候 Vue 就知道：“哦，这个组件用到了 message”，于是把这个组件对应的 watcher 加入到 message 的依赖列表中。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
你可以把它想象成这样：
- 每个数据都有一个“小本本”，上面记着谁用过我。
- 当数据变了，就告诉这些“用过我的人”：“我变了，你该更新了。”
派发更新：数据变了，通知订阅者
当你修改了响应式数据，比如：
this.message = 'New Message'
这时候 Vue 会触发数据的 setter（或者 Proxy 的 set 拦截），然后去遍历之前收集到的依赖，一个个通知它们更新。
这个过程就是“派发更新”。
注意几点：
- 更新不是立即执行的，而是异步批量处理的，这样可以避免频繁重渲染。
- 计算属性、watch、组件模板里的变量都会形成不同的 watcher，并各自管理自己的依赖。
一些容易忽略的细节
-
数组的响应式处理有点特殊：Vue 不能直接通过索引修改数组元素来触发更新，必须使用变异方法（如
push、splice）或用Vue.set。 -
新增属性不会自动响应：如果对象一开始没有定义某个属性，后面再加进去，是不会被追踪的。可以用
Vue.set或this.$set解决。 - 深层响应是递归完成的：如果你的数据嵌套很深，Vue 会在初始化时递归地把所有子属性也变成响应式的。
基本上就这些。理解依赖追踪的核心逻辑后，你会发现 Vue 的响应式系统虽然强大，但并不神秘。只要记住三点：数据劫持 → 依赖收集 → 派发更新，就能掌握它的运作方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
