Vue.js 2.x 响应式系统的核心实现机制

Vue.js 的响应式系统是其最核心的特性之一，它实现了数据变化驱动视图自动更新的能力。这一机制的核心是“发布-订阅”模式 + 数据劫持。在 Vue 2.x 中，它通过Object.defineProperty实现；在 Vue 3.x 中，则通过Proxy实现。本文将以四个组件——Observer、Compile、Watcher和Dep为主线，深入剖析其实现原理，并进行总结。一、核心角色定义与职责组件名称类比核心职责Observer数据监听器监控探头递归遍历数据对象，使用Object.defineProperty（Vue 2）或Proxy（Vue 3）劫持属性的 getter/setter，实现依赖收集和派发更新。Dep消息订阅器 / 依赖收集器调度中心每个响应式属性对应一个 Dep 实例，内部维护一个订阅者（Watcher）数组。当属性被读取时收集依赖，被修改时通知所有订阅者。Watcher订阅者订阅者连接 Observer 和 Compile 的桥梁。它订阅一个或多个数据的变化，当收到 Dep 的通知时，执行回调函数（通常是更新视图或执行计算属性）。Compile指令解析器模板编译扫描模板 DOM，解析指令（如v-model、v-for）和插值表达式（{ { }}），替换数据并创建对应的 Watcher 实例。二、整体工作流程/