vue如何实现mvvm
Vue 的 MVVM 实现原理
Vue 通过数据绑定和响应式系统实现 MVVM（Model-View-ViewModel）模式。核心机制包括数据劫持、依赖收集和派发更新。
数据劫持
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问和修改。当数据变化时，触发 setter 通知依赖更新。
// Vue 2 的数据劫持示例
const data = { msg: 'Hello' };
Object.defineProperty(data, 'msg', {
get() { return value; },
set(newVal) {
value = newVal;
notifyUpdate(); // 触发更新
}
});依赖收集
每个组件实例对应一个 Watcher 实例。在渲染过程中，访问数据属性会触发 getter，将当前 Watcher 添加到依赖列表（Dep）中。
class Dep {
constructor() {
this.subs = []; // 存储 Watcher
}
depend() {
if (Watcher.target) {
this.subs.push(Watcher.target);
}
}
notify() {
this.subs.forEach(watcher => watcher.update());
}
}虚拟 DOM 与更新
Vue 将模板编译为渲染函数，生成虚拟 DOM。数据变化时，Watcher 触发重新渲染，通过 Diff 算法比对新旧虚拟 DOM，高效更新真实 DOM。
// 简化的渲染流程
function updateComponent() {
const vnode = render(); // 生成虚拟 DOM
patch(oldVnode, vnode); // 差异更新
}关键模块分工
- Model：普通 JavaScript 对象，存储业务数据。
- View：模板或渲染函数，声明式描述 UI。
- ViewModel：Vue 实例，桥接 Model 和 View，处理数据绑定和交互逻辑。
双向绑定示例
通过 v-model 指令实现表单输入与数据的双向绑定：
<input v-model="message">
<p>{{ message }}</p>new Vue({
data: { message: '' } // 数据变化自动更新视图，输入修改自动同步数据
});与传统 MVC 的区别
- MVC：手动操作 DOM，需直接监听事件并更新视图。
- MVVM：数据驱动视图，开发者只需关注数据状态，框架自动处理 DOM 更新。
Vue 的 MVVM 实现通过响应式系统和虚拟 DOM 技术，降低了直接操作 DOM 的复杂度，提升了开发效率。
