vue实现mvvm原理
Vue 实现 MVVM 的原理
Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是其核心原理的详细解析：
数据劫持（响应式系统）
Vue 通过 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）劫持数据的访问和修改。当数据发生变化时，能够自动触发视图更新。
-
Vue 2.x：
Object.defineProperty(obj, key, { get() { return value; }, set(newVal) { if (newVal !== value) { value = newVal; dep.notify(); // 通知依赖更新 } } }); -
Vue 3.x：
const proxy = new Proxy(obj, { get(target, key) { return Reflect.get(target, key); }, set(target, key, value) { Reflect.set(target, key, value); trigger(target, key); // 触发更新 } });
依赖收集
Vue 在编译模板时，会为每个响应式数据创建一个 Dep（依赖管理器）。当数据被访问时，当前 Watcher（观察者）会被添加到 Dep 中。
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，仅更新必要的部分。
function patch(oldVnode, vnode) {
if (sameVnode(oldVnode, vnode)) {
patchVnode(oldVnode, vnode);
} else {
replaceNode(oldVnode, vnode);
}
}模板编译
Vue 将模板编译为渲染函数。模板中的指令（如 v-model、v-for）会被解析为对应的 JavaScript 代码。
-
示例模板：
<div v-if="show">{{ message }}</div> -
编译结果：
function render() { return show ? createElement('div', message) : null; }
双向数据绑定
v-model 是语法糖，结合 :value 和 @input 实现双向绑定。
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">总结
Vue 的 MVVM 实现通过数据劫持、依赖收集、虚拟 DOM 和模板编译等技术，实现了数据与视图的自动同步。Vue 3.x 引入 Proxy 进一步优化了响应式系统的性能和功能。
