vue如何实现mvvm
Vue 的 MVVM 实现原理
Vue 通过数据绑定和响应式系统实现 MVVM（Model-View-ViewModel）模式。其核心在于将数据模型（Model）与视图（View）通过 ViewModel 层自动同步。
数据劫持（响应式核心）
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问和修改。当数据变化时，触发依赖的视图更新。
// Vue 2 响应式简化示例
function defineReactive(obj, key) {
let value = obj[key]
Object.defineProperty(obj, key, {
get() {
return value
},
set(newVal) {
if (newVal !== value) {
value = newVal
updateView() // 触发视图更新
}
}
})
}依赖收集（Watcher 机制）
每个组件实例对应一个 Watcher，在渲染过程中访问数据属性时，会将当前 Watcher 注册为依赖。数据变化时通知所有依赖的 Watcher 触发更新。
class Dep {
constructor() {
this.subscribers = []
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target)
}
}
notify() {
this.subscribers.forEach(sub => sub())
}
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 实现高效更新。当数据变化时，生成新的虚拟 DOM 树，通过 Diff 算法比对差异，最小化真实 DOM 操作。
// 简化的虚拟 DOM 结构
{
tag: 'div',
props: { class: 'container' },
children: [
{ tag: 'p', text: 'Hello Vue' }
]
}模板编译
Vue 将模板编译为渲染函数，建立数据与视图的绑定关系。通过指令（如 v-model）实现双向绑定。
<!-- 模板 -->
<input v-model="message">
<p>{{ message }}</p>
<!-- 编译后的渲染函数（简化） -->
function render() {
return _c('div', [
_c('input', {
on: {
input: function($event) {
message = $event.target.value
}
}
}),
_c('p', [_v(_s(message))])
])
}关键设计要点
- 数据驱动：视图变化由数据变化自动触发
- 组件化：每个组件都是独立的 MVVM 单元
- 异步更新队列：批量处理数据变更，优化性能
- 指令系统：扩展 HTML 的声明式绑定能力
Vue 3 在响应式系统上改用 Proxy，解决了 Vue 2 中数组和对象属性添加的限制，同时优化了依赖追踪机制，性能显著提升。
