vue动态渲染实现原理
Vue 动态渲染实现原理
Vue 的动态渲染核心依赖于响应式系统和虚拟 DOM 技术，以下是其关键实现机制：
响应式系统
Vue 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据被修改时，触发 setter 函数，通知依赖该数据的 Watcher 实例更新视图。
// Vue 2 响应式简化示例
function defineReactive(obj, key) {
let value = obj[key]
const dep = new Dep() // 依赖收集容器
Object.defineProperty(obj, key, {
get() {
if (Dep.target) dep.addSub(Dep.target) // 收集依赖
return value
},
set(newVal) {
if (newVal === value) return
value = newVal
dep.notify() // 触发更新
}
})
}虚拟 DOM 与 Diff 算法
组件渲染时生成虚拟 DOM 树，数据变化后生成新虚拟 DOM，通过 Diff 算法比较差异：
// 虚拟 DOM 结构示例
{
tag: 'div',
props: { class: 'container' },
children: [
{ tag: 'span', text: '动态内容' }
]
}Diff 算法采用同级比较策略，通过 patch 函数最小化 DOM 操作：
- 相同节点复用 DOM 元素
- 节点类型不同时直接替换
- 列表节点通过
key优化复用
模板编译
Vue 模板会被编译为渲染函数：
- 解析器将模板转换为 AST（抽象语法树）
- 优化器标记静态节点
- 代码生成器输出渲染函数
// 编译结果示例
function render() {
with(this) {
return _c('div', { attrs: { id: 'app' } }, [
_v(message)
])
}
}组件更新机制
组件级更新通过异步队列（nextTick）批量处理：
- 数据变化触发 setter
- Watcher 被推入队列
- 事件循环结束时执行队列更新
- 最终调用
patch更新真实 DOM
这种机制保证了即使多次修改数据，也只会触发一次重渲染。
