vue怎样实现mvvm
Vue 实现 MVVM 的原理
Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。其核心是通过数据劫持和发布-订阅模式，将数据的变化自动反映到视图上。
数据劫持与响应式
Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来劫持数据的访问和修改。当数据被修改时，Vue 能够检测到变化并通知相关的视图进行更新。
// Vue 2.x 的数据劫持示例
const data = { message: 'Hello' };
Object.defineProperty(data, 'message', {
get() {
return this._message;
},
set(newValue) {
this._message = newValue;
console.log('数据已更新，触发视图渲染');
}
});模板编译与虚拟 DOM
Vue 的模板会被编译成渲染函数，生成虚拟 DOM。当数据变化时，Vue 会通过对比新旧虚拟 DOM 来高效地更新真实 DOM。
// 模板编译示例
<template>
<div>{{ message }}</div>
</template>
// 编译后的渲染函数
function render() {
return _c('div', [_v(_s(message))]);
}依赖收集与发布-订阅
Vue 通过依赖收集机制跟踪哪些组件依赖于哪些数据。当数据变化时，Vue 会通知所有依赖的组件进行更新。
// 简化的 Watcher 示例
class Watcher {
constructor(vm, key, callback) {
this.vm = vm;
this.key = key;
this.callback = callback;
Dep.target = this;
this.value = vm[key]; // 触发 getter，收集依赖
Dep.target = null;
}
update() {
this.callback(this.vm[this.key]);
}
}双向数据绑定
Vue 通过 v-model 指令实现双向数据绑定，本质上是语法糖，结合了 v-bind 和 v-on。
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">总结
Vue 的 MVVM 实现主要包括：
- 数据劫持与响应式系统
- 模板编译与虚拟 DOM
- 依赖收集与发布-订阅机制
- 双向数据绑定
这些机制共同作用，实现了数据与视图的自动同步。
