1. 介绍
版本:2.5.17。
我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。
学习文档:https://ustbhuangyi.github.io/vue-analysis/components/patch.html
2.patch
通过上一节的分析我们知道,当我们通过 createComponent
创建了组件 VNode,接下来会走到 vm._update
,执行 vm.__patch__
去把 VNode 转换成真正的 DOM 节点。这个过程我们在前一章已经分析过了,但是针对一个普通的 VNode 节点,接下来我们来看看组件的 VNode 会有哪些不一样的地方。
patch 的过程会调用 createElm
创建元素节点,回顾一下 createElm
的实现,它的定义在 src/core/vdom/patch.js
中:
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
// ...
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
// ...
}
3.createComponent
我们删掉多余的代码,只保留关键的逻辑,上面的代码会判断 createComponent(vnode, insertedVnodeQueue, parentElm, refElm) 的返回值,如果为 true 则直接结束。
createComponent其实调用的就是给逐渐VNode添加的init方法
那么接下来看一下 createComponent 方法的实现:
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
let i = vnode.data
if (isDef(i)) {
const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
}
// after calling the init hook, if the vnode is a child component
// it should've created a child instance and mounted it. the child
// component also has set the placeholder vnode's elm.
// in that case we can just return the element and be done.
if (isDef(vnode.componentInstance)) {
initComponent(vnode, insertedVnodeQueue)
insert(parentElm, vnode.elm, refElm)
if (isTrue(isReactivated)) {
reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
}
return true
}
}
}
3.1 对vnode.data 做了一些判断
let i = vnode.data
if (isDef(i)) {
// ...
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
// ...
}
// ..
}
- vnode 是一个组件 VNode,那么条件会满足,并且得到 i 就是 init 钩子函数
- 判断vnode.data中是否有hook,并且有init方法(因为上一节讲了会给组件VNode merage一些钩子,其中就有init,所以这里是true),就会调用init方法
3.2 init方法
init方法定义在 src/core/vdom/create-component.js 中:
其实就是和组件的data.hook钩子合并的 componentVNodeHooks 钩子对象的init方法
init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
if (
vnode.componentInstance &&
!vnode.componentInstance._isDestroyed &&
vnode.data.keepAlive
) {
// kept-alive components, treat as a patch
const mountedNode: any = vnode // work around flow
componentVNodeHooks.prepatch(mountedNode, mountedNode)
} else {
const child = vnode.componentInstance = createComponentInstanceForVnode(
vnode,
activeInstance
)
child.$mount(hydrating ? vnode.elm : undefined, hydrating)
}
},
init
钩子函数执行也很简单,我们先不考虑 keepAlive
的情况,它是通过 createComponentInstanceForVnode
创建一个 Vue 的实例,然后调用 $mount
方法挂载子组件
3.3 createComponentInstanceForVnode
创建一个 vnode 的实例
在src/core/vdom/create-component.js中
export function createComponentInstanceForVnode (
vnode: any, // 组件VNode
parent: any, // 当前vue实例vm
): Component {
// 定义参数
const options: InternalComponentOptions = {
_isComponent: true,
// 父VNode,是一个占位节点,Vue实例A调用B组件,B调用C组件,_parentVnode就是C组件占位符
_parentVnode: vnode,
//表示当前激活的子组件的父级实例,例如 app =new Vue,并调用子组件,parent就是app
parent
}
...
// 由上一节我们知道组件会生成子构造器,vnode.componentOptions.Ctor 对应的就是子组件的构造函数
return new vnode.componentOptions.Ctor(options)
}
createComponentInstanceForVnode 函数构造的一个内部组件的参数,然后执行 new
vnode.componentOptions.Ctor(options)。
由上一节我们知道组件会生成子构造器,vnode.componentOptions.Ctor 对应的就是子组件的构造函数,
我们上一节分析了子构造器实际上是继承于 Vue 的一个构造器 Sub,相当于 new Sub(options)
这里有几个关键参数要注意几个点,_isComponent 为 true 表示它是一个组件,parent 表示当前激活的组件实例。
3.4 Sub定义
sub定义在 src/core/global-api/exten.js
const Sub = function VueComponent (options) {
this._init(options)cd
}
所以子组件的实例化实际上就是在这个时机执行的,并且它会执行实例的 _init 方法
3.5 普通VNode 节点和组件的 VNode 初始化的不同。
他们都是在src/core/instance/init.js中初始化的,只是有一些不同,我们主要来看不同的
代码在 src/core/instance/init.js 中:
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
// ...
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
3.5.1. 合并 options 的过程有变化
合并 options 的过程有变化,_isComponent 为 true,所以走到了 initInternalComponent 过程,,而上一章普通的 VNode 节点则会走else。这个函数的实现也在当前页面 src/core/instance/init.js :
export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
const opts = vm.$options = Object.create(vm.constructor.options)
// doing this because it's faster than dynamic enumeration.
const parentVnode = options._parentVnode
opts.parent = options.parent
opts._parentVnode = parentVnode
const vnodeComponentOptions = parentVnode.componentOptions
opts.propsData = vnodeComponentOptions.propsData
opts._parentListeners = vnodeComponentOptions.listeners
opts._renderChildren = vnodeComponentOptions.children
opts._componentTag = vnodeComponentOptions.tag
if (options.render) {
opts.render = options.render
opts.staticRenderFns = options.staticRenderFns
}
}
这个过程我们重点记住以下几个点即可:opts.parent = options.parent
、opts._parentVnode = parentVnode
,它们是把之前我们通过 createComponentInstanceForVnode
函数传入的几个参数合并到内部的选项 $options
里了。
_init
函数最后执行的代码
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
$mount
相当于执行 child.$mount(undefined, false)
,它最终会调用 mountComponent
方法,进而执行 vm._render()
方法