vue如何实现mvvm
Vue 的 MVVM 实现原理
Vue 通过数据绑定、响应式系统和虚拟 DOM 实现了 MVVM（Model-View-ViewModel）模式。以下是其核心机制：
数据劫持与响应式系统
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据变化时，自动触发依赖更新。
// Vue 2 响应式原理简化示例
function defineReactive(obj, key) {
let value = obj[key]
const dep = new Dep() // 依赖收集器
Object.defineProperty(obj, key, {
get() {
dep.depend() // 收集当前依赖
return value
},
set(newVal) {
value = newVal
dep.notify() // 通知更新
}
})
}模板编译与指令解析
Vue 将模板编译为渲染函数，解析指令如 v-model 和插值表达式 {{}}，建立数据与视图的绑定关系。
// 模板示例
<input v-model="message">
<p>{{ message }}</p>虚拟 DOM 与差异更新
Vue 通过虚拟 DOM 实现高效更新，比较新旧虚拟 DOM 树的差异，最小化真实 DOM 操作。
// 虚拟 DOM 简化结构
{
tag: 'div',
props: { class: 'container' },
children: [
{ tag: 'p', text: 'Hello' }
]
}双向绑定实现
v-model 是语法糖，自动处理 value 属性和 input 事件，实现表单元素的双向绑定。
// v-model 等价形式
<input :value="message" @input="message = $event.target.value">依赖收集与派发更新
Watcher 在渲染过程中触发 getter 收集依赖，数据变化时通知相关 Watcher 更新组件。
// Watcher 简化逻辑
class Watcher {
constructor(vm, fn) {
this.vm = vm
Dep.target = this
fn() // 触发 getter
Dep.target = null
}
update() {
// 触发组件更新
}
}组件化与状态管理
每个 Vue 组件都是独立的 ViewModel 实例，通过 props 向下传递数据，events 向上传递消息，形成组件树。
// 组件通信示例
Vue.component('child', {
props: ['msg'],
template: `<div @click="$emit('reply')">{{ msg }}</div>`
})Vue 通过这些机制实现了数据与视图的自动同步，开发者只需关注数据状态，无需手动操作 DOM。
