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() {
console.log(`读取 ${key}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`设置 ${key} 为 ${newVal}`);
val = newVal;
}
}
});
}依赖收集与观察者模式
每个响应式属性关联一个 Dep（依赖收集器），用于存储依赖该属性的 Watcher（观察者）。当属性被访问时，当前 Watcher 会被添加到 Dep 中。
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}虚拟 DOM 与差异更新
Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM 并与旧虚拟 DOM 进行差异比对（diff 算法），仅更新必要的真实 DOM 节点。
// 简化的虚拟 DOM 结构
{
tag: 'div',
props: { id: 'app' },
children: [
{ tag: 'span', props: {}, children: ['Hello'] }
]
}模板编译
Vue 模板会被编译为渲染函数。指令（如 v-model）会被解析为对应的数据绑定和事件监听代码。
// v-model 的编译结果示例
<input v-model="message">
// 编译为：
h('input', {
domProps: { value: this.message },
on: { input: e => this.message = e.target.value }
})组件系统
Vue 组件是 MVVM 的 ViewModel 层，管理自身的数据、方法和生命周期。组件间通过 props（父传子）和 $emit（子传父）通信。
Vue.component('child', {
props: ['msg'],
template: `<div @click="$emit('reply', 'Hi')">{{ msg }}</div>`
});生命周期钩子
Vue 提供生命周期钩子（如 created、mounted）让开发者在特定阶段执行逻辑。这些钩子对应 MVVM 中 ViewModel 的初始化、挂载和销毁过程。
new Vue({
created() {
console.log('实例创建完成');
},
mounted() {
console.log('DOM 挂载完成');
}
});通过以上机制，Vue 实现了数据与视图的自动同步，开发者只需关注数据状态而无需手动操作 DOM。
