vue如何实现mvvm
Vue 实现 MVVM 的核心机制
Vue 的 MVVM（Model-View-ViewModel）实现依赖于数据绑定和响应式系统，通过以下核心机制完成：
数据劫持（响应式系统）
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据变化时，触发 setter 通知依赖更新。例如 Vue 2 的实现片段：
Object.defineProperty(obj, key, {
get() { return val },
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify(); // 通知订阅者更新
}
});依赖收集（Watcher 系统） 每个组件实例对应一个 Watcher，在渲染过程中访问数据属性时，触发 getter 将当前 Watcher 收集为依赖。数据变更时，通过 setter 通知所有关联的 Watcher 重新渲染。
虚拟 DOM 与差异更新 Vue 将模板编译为渲染函数，生成虚拟 DOM。当数据变化触发重新渲染时，通过 diff 算法比对新旧虚拟 DOM，最小化真实 DOM 操作。
模板编译流程
Vue 的模板编译分为三个阶段，将模板转换为可执行的渲染函数：
解析器（Parser）
将模板字符串解析为抽象语法树（AST），处理指令、插值等语法。例如解析 {{message}} 会生成一个带标记的 AST 节点。
优化器（Optimizer） 标记静态节点和静态根节点，在后续更新中跳过这些节点的比对，提升性能。
代码生成器（CodeGen）
将 AST 转换为渲染函数代码。生成的渲染函数包含 _c（创建元素）、_v（创建文本节点）等帮助函数，最终形式类似：
with(this) {
return _c('div', { attrs: { id: app } }, [_v(_s(message))])
}双向绑定实现原理
v-model 是语法糖，其实现基于单向数据流和事件监听：
表单元素处理
对于 <input v-model="text">，编译后会生成:
{
on: { input: $event => (text = $event.target.value) },
domProps: { value: text }
}组件扩展 在自定义组件上使用时，默认等价于：
:value="value" @input="value => $emit('input', value)"响应式系统的进阶优化
批量异步更新
Vue 通过队列机制批量处理 Watcher 更新，使用 nextTick 延迟执行 DOM 更新，避免重复计算。
计算属性缓存 计算属性基于其依赖进行缓存，只有当依赖变化时才重新计算，避免不必要的开销。
侦听器优化
用户定义的 watch 支持深度观测（deep: true）和立即执行（immediate: true），底层通过 Watcher 的不同配置实现。
通过以上机制的组合，Vue 实现了声明式渲染、数据驱动视图更新的 MVVM 模式，开发者只需关注数据状态，无需手动操作 DOM。
