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('获取值');
return val;
},
set(newVal) {
if (newVal !== val) {
console.log('设置值');
val = 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（VNode），通过 Diff 算法比对变化，最小化 DOM 操作。当数据变化时，生成新的 VNode 并与旧 VNode 对比，高效更新真实 DOM。
// 虚拟 DOM 简化结构
const vnode = {
tag: 'div',
props: { class: 'container' },
children: [
{ tag: 'p', text: 'Hello Vue' }
]
};模板编译
Vue 的模板通过编译器转换为渲染函数。例如以下模板：
<div>{{ message }}</div>会被编译为类似以下的渲染函数：
function render() {
return _c('div', [_v(_s(message))]);
}实现流程
- 初始化阶段：通过
new Vue()创建实例，初始化数据、方法、生命周期等。 - 模板编译：将模板转换为渲染函数（如果是运行时编译版本）。
- 响应式处理：对
data中的属性进行劫持，建立Dep和Watcher的关联。 - 首次渲染：执行渲染函数生成 VNode，并挂载为真实 DOM。
- 更新阶段：数据变化时触发
setter，通知Watcher重新渲染，通过 Diff 算法更新 DOM。
通过以上机制，Vue 实现了数据驱动视图的 MVVM 模式，开发者只需关注数据逻辑，无需手动操作 DOM。
