vue mvvm实现
Vue MVVM 实现原理
Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是 Vue 实现 MVVM 的核心机制：
数据劫持与响应式
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 val;
},
set(newVal) {
console.log('设置 name');
val = newVal;
// 触发视图更新
}
});依赖收集与发布订阅
Vue 通过 Dep（依赖）和 Watcher（观察者）实现发布订阅模式。每个响应式属性都有一个 Dep 实例，用于收集依赖的 Watcher。当数据变化时，Dep 通知所有 Watcher 更新视图。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
update() {
// 更新视图
}
}模板编译与虚拟 DOM
Vue 将模板编译为渲染函数，生成虚拟 DOM（VNode）。当数据变化时，通过对比新旧虚拟 DOM，高效更新真实 DOM。
// 模板编译示例
const template = '<div>{{ name }}</div>';
const render = new Function('with(this){return _c("div",[_v(_s(name))])}');双向数据绑定
Vue 通过 v-model 实现双向数据绑定，本质上是语法糖，结合 :value 和 @input 实现。
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">生命周期与更新机制
Vue 的生命周期钩子（如 created、mounted）在特定阶段触发，确保数据、视图和事件的正确初始化与更新。
new Vue({
data() { return { count: 0 } },
mounted() {
// 视图挂载后触发
},
template: '<div>{{ count }}</div>'
});通过以上机制，Vue 实现了 Model 与 View 的自动同步，开发者只需关注数据逻辑，无需手动操作 DOM。
