Vue 的 MVVM 实现理解
Vue 的 MVVM 实现原理
Vue 的 MVVM（Model-View-ViewModel）架构通过数据绑定和响应式系统实现视图与数据的自动同步。ViewModel 是核心，负责连接 Model 和 View。
数据绑定机制
Vue 使用双向数据绑定，通过 v-model 指令实现表单输入与应用状态的同步。模板中的插值表达式 {{ }} 或指令（如 v-bind）将数据动态绑定到 DOM。
<input v-model="message">
<p>{{ message }}</p>响应式系统
Vue 2.x 使用 Object.defineProperty 对数据对象进行劫持，通过 getter/setter 监听属性变化。Vue 3.x 升级为 Proxy，提供更全面的拦截能力。
// Vue 2.x 响应式原理简化示例
function defineReactive(obj, key) {
let value = obj[key]
Object.defineProperty(obj, key, {
get() {
return value
},
set(newVal) {
if (newVal !== value) {
value = newVal
updateView() // 触发视图更新
}
}
})
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM 树，与旧树通过 Diff 算法比较差异，最小化 DOM 操作。
// 虚拟 DOM 结构示例
{
tag: 'div',
props: { id: 'app' },
children: [
{ tag: 'span', text: 'Hello' }
]
}模板编译过程
Vue 将模板编译为渲染函数：
- 解析模板生成 AST（抽象语法树）
- 优化静态节点
- 生成可执行的渲染函数代码
组件化实现
Vue 组件本质是可复用的 Vue 实例，通过 Vue.component() 或单文件组件（.vue）定义。每个组件维护独立的响应式数据、模板和生命周期。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})生命周期管理
Vue 实例从创建到销毁经历多个生命周期钩子，如 created、mounted、updated 等，开发者可在特定阶段插入自定义逻辑。
依赖收集与派发更新
- 渲染时触发 getter，收集依赖（Watcher）
- 数据变化时触发 setter，通知依赖更新
- Watcher 执行更新操作，可能触发组件重新渲染
这种机制确保精确更新依赖变化的组件，而非整个应用。
