vue mvvm怎么实现的
Vue MVVM 的实现原理
Vue 的 MVVM（Model-View-ViewModel）模式通过数据绑定和响应式系统实现视图与数据的自动同步。以下是其核心实现机制：
数据劫持与响应式系统
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据变化时，触发依赖的视图更新。
// Vue 2 的数据劫持示例
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal !== val) {
val = newVal;
// 触发更新
}
}
});
}依赖收集与观察者模式
通过 Dep（依赖管理器）和 Watcher（观察者）实现依赖追踪：
- 每个响应式属性对应一个
Dep实例。 - 模板编译时创建
Watcher，触发属性的getter时将Watcher添加到Dep中。 - 属性变化时通过
Dep通知所有关联的Watcher更新视图。
虚拟 DOM 与差异更新
Vue 将模板编译为虚拟 DOM（VNode），通过 diff 算法对比新旧 VNode，最小化 DOM 操作：
// 简化的 diff 示例
function patch(oldVnode, newVnode) {
if (sameVnode(oldVnode, newVnode)) {
// 更新差异属性
} else {
// 替换节点
}
}模板编译
Vue 将模板转换为渲染函数：
- 解析模板为 AST（抽象语法树）。
- 优化 AST（如标记静态节点）。
- 生成渲染函数代码字符串。
// 编译结果示例
function render() {
return _c('div', { attrs: { id: 'app' } }, [_v("Hello " + _s(name))]);
}双向绑定的实现
v-model 本质是语法糖，结合 v-bind 和 v-on：
- 文本输入：监听
input事件并更新数据。 - 复选框/单选：监听
change事件并同步数组或布尔值。
// v-model 的简化实现
input.addEventListener('input', (e) => {
data.value = e.target.value;
});关键设计思想
- 数据驱动：视图变化由数据变化触发，避免手动操作 DOM。
- 组件化：每个组件实例拥有独立的响应式系统和作用域。
- 异步更新队列：同一事件循环内的数据变化合并为一次更新，提高性能。
通过以上机制，Vue 实现了 Model 与 View 的自动同步，开发者只需关注数据逻辑，无需直接操作视图。
