vue mvvm 实现
Vue MVVM 实现原理
Vue.js 的 MVVM（Model-View-ViewModel）架构通过数据绑定和响应式系统实现视图与数据的自动同步。以下是其核心实现机制：
数据劫持与响应式系统
Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）劫持数据对象的属性访问。当数据变化时，依赖该数据的视图会自动更新。
// Vue 2.x 数据劫持示例
const data = { name: 'Vue' };
Object.defineProperty(data, 'name', {
get() {
console.log('获取name');
return this._name;
},
set(newVal) {
console.log('更新name');
this._name = newVal;
// 触发视图更新
}
});依赖收集与发布订阅
每个响应式属性关联一个 Dep（依赖收集器），用于管理所有依赖该属性的 Watcher（观察者）。当属性变化时，Dep 通知所有 Watcher 更新视图。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 高效更新视图。当数据变化时，生成新的虚拟 DOM，通过 Diff 算法计算最小化 DOM 操作。
// 简化的虚拟 DOM 结构
const vnode = {
tag: 'div',
props: { id: 'app' },
children: [{ tag: 'span', text: 'Hello' }]
};模板编译
Vue 将模板编译为渲染函数。模板中的指令（如 v-model）被转换为 JavaScript 代码，实现数据绑定和事件监听。
// v-model 的简化实现
<input v-model="message" />
// 编译后相当于
<input :value="message" @input="message = $event.target.value" />双向绑定实现
v-model 是语法糖，结合 v-bind 和 v-on 实现双向绑定。例如表单输入元素自动同步数据与视图。
// 自定义双向绑定组件
Vue.component('custom-input', {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
/>
`
});生命周期钩子
Vue 实例的生命周期钩子（如 created、mounted）提供关键时间点的回调，便于开发者介入 MVVM 流程。
new Vue({
data: { count: 0 },
created() {
console.log('实例已创建，数据观测完成');
},
mounted() {
console.log('DOM 挂载完成');
}
});通过以上机制，Vue 实现了数据驱动视图的 MVVM 模式，开发者只需关注数据状态，视图更新由框架自动处理。
