vue核心实现原理详解
Vue核心实现原理
Vue.js的核心实现原理主要包括响应式系统、虚拟DOM、模板编译和组件化机制。以下是对这些核心原理的详细解析：
响应式系统
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() {
if (Dep.target) dep.depend() // 收集依赖
return value
},
set(newVal) {
if (newVal === value) return
value = newVal
dep.notify() // 通知更新
}
})
}虚拟DOM
Vue使用虚拟DOM来提高渲染效率。当状态变化时，会生成新的虚拟DOM树，通过diff算法比较新旧树的差异，最小化DOM操作。
// 虚拟DOM简化结构
{
tag: 'div',
props: { class: 'container' },
children: [
{ tag: 'span', props: {}, children: ['Hello'] }
]
}模板编译
Vue模板会编译为渲染函数。编译过程分为三个阶段：
- 解析：将模板字符串转换为AST（抽象语法树）
- 优化：标记静态节点用于后续优化
- 生成：将AST转换为可执行的渲染函数代码
// 模板编译结果示例
function render() {
with(this) {
return _c('div', { attrs: { "id": "app" } }, [
_c('p', [_v(_s(message))])
])
}
}组件化机制
Vue组件是独立的可复用模块，每个组件都有独立的生命周期。组件实例化时会合并选项、初始化数据、建立响应式关联。
// 组件初始化流程
function initComponent(vm) {
vm._uid = uid++
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
initState(vm) // 初始化props/data/computed等
initProvide(vm)
callHook(vm, 'created')
}响应式原理深入
依赖收集
每个响应式属性都有一个Dep实例，用于收集所有依赖该属性的Watcher。当属性值变化时，Dep会通知所有Watcher执行更新。
class Dep {
constructor() {
this.subs = []
}
depend() {
if (Dep.target) this.subs.push(Dep.target)
}
notify() {
this.subs.forEach(watcher => watcher.update())
}
}派发更新
当数据变化触发setter时，会通过Dep通知所有依赖进行更新。更新过程采用异步队列机制，同一事件循环内的多次数据变更会被合并。
function queueWatcher(watcher) {
if (!flushing) {
queue.push(watcher)
}
if (!waiting) {
waiting = true
nextTick(flushSchedulerQueue)
}
}虚拟DOM diff算法
Vue的diff算法基于同级比较，采用双端比较策略优化处理常见场景。算法复杂度为O(n)，通过以下策略提高效率：
- 新旧节点不同时直接替换
- 相同节点时比较属性差异
- 列表节点使用key标识提高复用率
function patchVnode(oldVnode, vnode) {
if (oldVnode === vnode) return
const elm = vnode.elm = oldVnode.elm
const oldCh = oldVnode.children
const ch = vnode.children
if (!vnode.text) {
if (oldCh && ch) {
updateChildren(elm, oldCh, ch)
} else if (ch) {
addVnodes(elm, null, ch, 0, ch.length - 1)
} else if (oldCh) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
}
} else if (oldVnode.text !== vnode.text) {
setTextContent(elm, vnode.text)
}
}生命周期钩子执行时机
Vue组件生命周期钩子按照特定顺序执行，主要分为创建、挂载、更新和销毁四个阶段：
- beforeCreate：实例初始化后，数据观测之前
- created：实例创建完成，数据观测已建立
- beforeMount：挂载开始之前
- mounted：实例挂载到DOM后
- beforeUpdate：数据更新时，DOM更新前
- updated：数据更新后，DOM更新完成
- beforeDestroy：实例销毁前
- destroyed：实例销毁后
异步更新队列
Vue使用异步更新队列优化性能，数据变化不会立即触发DOM更新。通过nextTickAPI可以访问更新后的DOM。
Vue.nextTick(() => {
// DOM更新完成后执行
})计算属性和侦听器实现
计算属性基于响应式系统实现，具有缓存特性。侦听器通过Watcher实现，支持深度观测和立即执行等选项。
function initComputed(vm) {
const watchers = vm._computedWatchers = {}
for (const key in computed) {
const getter = computed[key]
watchers[key] = new Watcher(vm, getter, noop, { lazy: true })
defineComputed(vm, key, getter)
}
}
