在前面的模板编译学习笔记中,我们知道 $mount
会将模板编译生成 render
函数,然后调用 mount.call(this, el, hydrating)
;
// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount
// 重新定义 $mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
// ... 其他代码
// 调用原先 Vue 原型上 $mount 方法
return mount.call(this, el, hydrating)
}
上面的 mount
是 Vue 原型上 $mount
方法;
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
mountComponent
是组件实例挂载的入口函数,因为跟生命周期相关,所以这个方法的具体代码对于源码的位置是在 lifecycle
文件;
// src/core/instance/lifecycle.js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
// 将真实的 el 赋值给实例,为后面虚拟 dom 做铺垫
vm.$el = el
// render 函数的判断
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
)
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
)
}
}
}
callHook(vm, 'beforeMount')
let updateComponent
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${
id}`
const endTag = `vue-perf-end:${
id}`
mark(startTag)
const vnode = vm._render()
mark(endTag)
measure(`vue ${
name} render`, startTag, endTag)
mark(startTag)
vm._update(vnode, hydrating)
mark(endTag)
measure(`vue ${
name} patch`, startTag, endTag)
}
} else {
updateComponent = () => {
// 实例挂载
vm._update(vm._render(), hydrating)
}
}
// 创建一个渲染 watcher 实例,主要执行 updateComponent 的方法
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// mounted 钩子函数只执行一次
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
从上面的代码可以看出mountComponent
方法主要将 el
赋值给实例,然后通过调用 vm._update(vm._render(), hydrating)
挂载实例,我们接着看 _update
和 _render
;
// src/core/instance/render.js
export function initRender (vm: Component) {
// ... 其他代码
// 主要参数: tag, data, children
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}
export function renderMixin (Vue: Class<Component>) {
installRenderHelpers(Vue.prototype)
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
}
Vue.prototype._render = function (): VNode {
const vm: Component = this
// 获取 render 函数
const {
render, _parentVnode } = vm.$options
if (_parentVnode) {
vm.$scopedSlots = normalizeScopedSlots(
_parentVnode.data.scopedSlots,
vm.$slots,
vm.$scopedSlots
)
}
vm.$vnode = _parentVnode
let vnode
try {
currentRenderingInstance = vm
// 执行 render 函数生成 vnode
vnode = render.call(vm._renderProxy, vm.$createElement)
} catch (e) {
handleError(e, vm, `render`)
if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
try {
vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
} catch (e) {
handleError(e, vm, `renderError`)
vnode = vm._vnode
}
} else {
vnode = vm._vnode
}
} finally {
currentRenderingInstance = null
}
// ... 其他代码
return vnode
}
}
_render
函数实际上是 render
函数转化为 vnode
的核心,通过执行模板编译生成的 render
函数来生成 vnode
;
// src/core/instance/lifecycle.js
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
vm._vnode = vnode
if (!prevVnode) {
// 初始化渲染调用
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// 更新时调用
vm.$el = vm.__patch__(prevVnode, vnode)
}
restoreActiveInstance()
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
}
_update
是将虚拟 DOM 转化为真实 DOM 的核心方法,主要是通过 patch
方法来创建真实 DOM,初始化渲染和更新时只是传入的参数不同,patch
方法可以移步到另外一篇学习笔记;
总结:
初始化渲染的过程是在模板编译过后执行 mountComponent
,mountComponent
主要通过 vm._update(vm._render(), hydrating)
方法来进行实例挂载,而 _render
方法是执行模板编译生成的 render
函数来生成 vnode
,_update
方法是将生成虚拟 DOM 转化为真实 DOM,主要核心是 patch
方法;