vue单文件组件是如何一步一步渲染成DOM?
在 vue
项目中有一个main.js
的入口文件,代码如下:
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
你是否知道当我们执行这个文件时 vue
是如何把 App.vue
单文件组件转化为真实的DOM
渲染在浏览器中的?
那今天小编来尝试盘一盘这个问题。
new Vue 发生了什么
首先来看一下Vue
的函数类:
function Vue (options) {
this._init(options)
}
在实例化的过程中调用了 this._init
方法,该方法的主要作用是:
-
首先进行配置合并,在实例化时传入了一个
options
对象,这个对象和Vue
构造函数本身上的options
做一个合并,这样实例的$options
就具有了一些其他属性和方法; -
在
vue
实例上vm
上挂载了一些属性和方法,比如$createElement
方法; -
把
options
里面的data
变为响应式; -
调用
vm.$mount
方法挂载,挂载的目标就是把模板渲染成最终的DOM
。
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
...
// 合并配置,并在vm上挂载$options
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
...
// 进行一系列的初始化,即往实例上增加方法和属性
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
// 把data变成响应式
initState(vm)
initProvide(vm)
callHook(vm, 'created')
...
// 挂载
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
那么接下来我们来分析 Vue 的挂载过程。
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (el){
// 传入一个id,通过id获取的dom对象,记住是真实dom query:document.querySelector(el)
el = el && query(el)
...
const options = this.$options
// 如果options中没有render函数
if (!options.render) {
let template = options.template
if (template) {
...
// 获取模板字符串
template = template.innerHTML
...
} else if (el) {
// 如果没有template属性,那么就从el中获取dom的字符串
template = getOuterHTML(el)
}
if (template) {
// 把模板字符串转化为render函数
const { render, staticRenderFns } = compileToFunctions(template...)
// 把render函数放在options对象上
options.render = render
options.staticRenderFns = staticRenderFns
}
}
return mount.call(this, el, hydrating)
}
这段代码首先缓存了原型上的 $mount
方法,再重新定义该方法。
首先判断是否定义 render
方法,如果没有则会把 el
或者 template
字符串通过compileToFunctions
函数转换成 render
方法。
在实际的项目中,我们一般是用.vue
的单文件的形式开发,很少有自己写render
方法的,下面就是用render
方法来写组件:
new Vue({
el: '#app',
data() {
return {
message: 'hello vue'
}
},
render(createElement) {
return createElement(
'div',
{
attrs: {
id: 'app1'
}
},
this.message
)
}
})
这里我们要牢记,在 Vue 2.0 版本中,所有 Vue 的组件的渲染最终都需要
render
方法,无论我们是用单文件 .vue 方式开发组件,还是写了el
或者template
属性,最终都会转换成render
方法,那么这个过程是 Vue 的一个在线编译的过程,它是调用compileToFunctions
方法实现的,编译过程我们之后会介绍。
最后,调用原先原型上的 $mount
方法挂载。原先原型上的 $mount
方法在 src/platform/web/runtime/index.js
中定义,之所以这么设计完全是为了复用,因为它是可以被 runtime only
版本的 Vue 直接使用的。
Vue.prototype.$mount = function (el) {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el)
}
export function mountComponent (vm, el) {
vm.$el = el
...
callHook(vm, 'beforeMount')
...
let updateComponent
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
// 这一块后面会重点介绍
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
}
}, true)
...
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
从上面的代码可以看到,mountComponent
核心就是先实例化一个渲染Watcher
,在它的实例化中会调用 updateComponent
方法,在此方法中调用 vm._render
方法先生成虚拟DOM
,最终调用 vm._update
更新 DOM
。
render函数生成虚拟DOM
虚拟DOM
虚拟 DOM
这个概念相信大部分人都不会陌生,它产生的前提是浏览器中的 DOM
是很"昂贵"的,为了更直观的感受,我们可以简单的把一个简单的 div
元素的属性都打印出来,如图所示:
可以看到,真正的 DOM 元素是非常庞大的,因为浏览器的标准就把 DOM 设计的非常复杂。当我们频繁的去做 DOM 更新,会产生一定的性能问题。
而虚拟 DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中,虚拟DOM
是用 VNode
这么一个 Class 去描述:
export default class VNode {
constructor (tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Component ...
) {
this.tag = tag
this.data = data // 标签属性
this.children = children // 子节点
this.text = text // 文本节点
this.elm = elm // 虚拟dom所对应的真实dom节点
...
}
get child (): Component | void {
return this.componentInstance
}
}
其实 VNode 是对真实 DOM 的一种抽象描述,它的核心定义无非就几个关键属性,标签名、数据、子节点、键值等。由于 VNode 只是用来映射到真实 DOM 的渲染,不需要包含操作 DOM 的方法,因此它是非常轻量和简单的。
render函数
Vue 的 _render
方法用来把实例渲染成一个虚拟 Node。里面调用了$options.render
方法,这个方法是在打包编译时利用vue-loader
把我们写的单文件(.vue)里面的template
编译为render
函数:
Vue.prototype._render = function (): VNode {
const vm = this
const { render, _parentVnode } = vm.$options
...
let vnode
vnode = render.call(vm._renderProxy, vm.$createElement)
return vnode
}
在调用$options.render
时传入了vm.$createElement
方法,该方法又调用了_createElement
:
export function _createElement (context,tag,data,children,normalizationType
) {
...
// 如果没有传tag,则创建一个空vnode
if (!tag) {
return createEmptyVNode();
}
// 首先对children创建vnode,先子后父
children = normalizeChildren(children)
let vnode, ns
if (typeof tag === 'string') {
let Ctor
// 如果是平台保留的标签名,比如浏览器环境下的div标签
if (config.isReservedTag(tag)) {
// 生成vnode
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// 判断是否是一个组件,如果是则创建一个组件
vnode = createComponent(Ctor, data, context, children, tag)
} else {
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// 如果tag是一个对象,说明是一个组件
vnode = createComponent(tag, data, context, children)
}
...
return vnode
}
我们以如下代码来分析_createElement
的运行过程,下面代码中的children
有两个子节点,一个是文本节点,一个是继续调用_createElement
生成一个vnode
。
new Vue({
el: '#app',
data() {
return {
message: 'hello vue'
}
},
render(createElement) {
return createElement(
'div',
{
attrs: {
id: 'app1'
}
},
[
createElement('div', 'pengchangjun'),
this.message
]
)
}
})
当执行这段代码时,首先调用children里面的createElement
方法(先子后父),然后执行normalizeChildren
函数:
export function normalizeChildren (children: any): ?Array<VNode> {
return isPrimitive(children)
? [createTextVNode(children)]
: Array.isArray(children)
? normalizeArrayChildren(children)
: undefined
}
function normalizeArrayChildren (children, nestedIndex) {
var res = [];
var i, c, lastIndex, last;
for (i = 0; i < children.length; i++) {
c = children[i];
...
// nested 嵌套数组
if (Array.isArray(c)) {
if (c.length > 0) {
c = normalizeArrayChildren(c, ((nestedIndex || '') + "_" + i));
...
res.push.apply(res, c);
}
} else if (isPrimitive(c)) {
// 如果是原始类型则生成一个文本vnode
res.push(createTextVNode(c));
} else {
// 如果已经是vnode类型,则直接push
...
res.push(c);
}
}
return res
}
执行完成后,此时的children
已转为化虚拟dom:
[
{
// 这是一个VNode对象
tag: 'div',
data: undefined,
text: undefined,
children: [
{
// 这是一个vnode对象
tag: undefined,
data: undefined,
children: undefined,
text: 'pengchangjun',
...
}
]
},
// 这是一个文本vnode
{
tag: undefined,
data: undefined,
children: undefined,
text: 'hello vue',
...
}
]
继续执行,因为tag
是一个html
保留标签,所以执行:
vnode = new VNode(
config.parsePlatformTagName(tag), data, children, undefined, undefined, context
)
最后生成的虚拟dom长成这个样子:
{
tag: 'div',
data: {
attrs: {
id: 'app1'
}
},
children: [
{
// 这是一个VNode对象
tag: 'div',
data: undefined,
text: undefined,
children: [
{
// 这是一个vnode对象
tag: undefined,
data: undefined,
children: undefined,
text: 'pengchangjun',
...
}
]
},
// 这是一个文本vnode
{
tag: undefined,
data: undefined,
children: undefined,
text: 'hello vue',
...
}
]
text: undefined,
elm: undefined
}
那么至此,我们大致了解了 createElement
创建 VNode 的过程,每个 VNode 有 children
,children
每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree。
虚拟DOM生成真实DOM
我们已经知道 vm._render
是如何创建了一个 VNode,接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来,这个过程是通过 vm._update
完成的。
Vue 的 _update
被调用的时机有 2 个,一个是首次渲染,一个是数据更新的时候;本文只分析首次渲染部分。该方法的作用是把 VNode 渲染成真实的 DOM:
Vue.prototype._update = function (vnode: VNode) {
const vm = this
...
// 首次渲染
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false)
...
}
Vue.prototype.__patch__ = inBrowser ? patch : noop
const patch: Function = createPatchFunction({ nodeOps, modules })
createPatchFunction
内部定义了一系列的辅助方法,最终返回了一个 patch
方法,这个方法就赋值给了 vm._update
函数里调用的 vm.__patch__
。
export function createPatchFunction (backend) {
function createElm() {}
...
// 返回patch方法
return function patch (oldVnode, vnode, hydrating, removeOnly) {
...
// 判断是否是一个真实dom,首次渲染的时候oldVnode是一个真实dom
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
} else {
if (isRealElement) {
...
// 把真实dom转化为一个空的vnode,这个空vnode的属性elm值为真实dom,做了一个关联
oldVnode = emptyNodeAt(oldVnode)
}
// 每个vnode都有一个elm属性,这个属性是用该节点的tag生成的一个真实dom节点,它的作用是作为子节点的父节点,方便通过appendChild方法把子节点插入。
const oldElm = oldVnode.elm
// 通过真实dom获取父级,这里首次渲染的父级就是body标签
const parentElm = nodeOps.parentNode(oldElm)
// 创建真实dom节点
createElm(
vnode,
insertedVnodeQueue,
// 传入父级节点,这样子节点可以appendChild方法插入到父级节点中
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
...
// 删除老的节点
if (isDef(parentElm)) {
removeVnodes(parentElm, [oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
// 返回真实dom节点
return vnode.elm
}
}
下面通过一个简单的例子看下patch的过程:
var app = new Vue({
el: '#app',
render: function (createElement) {
return createElement('div', {
attrs: {
id: 'app1'
},
}, this.message)
},
data: {
message: 'Hello Vue!'
}
})
首次渲染在 vm._update
的方法里是这么调用 patch
方法的:
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false)
在执行 patch
函数的时候,传入的 vm.$el
对应的是例子中 id 为 app
的 DOM 对象,这个也就是我们在 index.html
模板中写的 <div id="app">
, vm.$el
的赋值是在之前 mountComponent
函数做的。
由于我们传入的 oldVnode
实际上是一个 DOM container
,所以 isRealElement
为 true,接下来又通过 emptyNodeAt
方法把 oldVnode
(vm.$el
) 转换成 VNode
对象,然后再调用 createElm
方法:
function createElm (vnode, insertedVnodeQueue, parentElm...) {
...
const data = vnode.data // dom的属性,比如id,class等
const children = vnode.children // 子节点
const tag = vnode.tag // 标签名
if (isDef(tag)) {
// 对于当前的vnode创建一个container节点容器,当前vnode的子节点转化为真实DOM之后都会插入到vnode.elm上
vnode.elm = nodeOps.createElement(tag, vnode)
...
// 创建子节点
createChildren(vnode, children, insertedVnodeQueue)
// 如果存在标签属性如id,class等,则往标签里面插入属性
if (isDef(data)) {
// 创建成功后,执行create阶段的钩子
invokeCreateHooks(vnode, insertedVnodeQueue)
}
// 把vnode的生成的真实节点插入到父节点body中
insert(parentElm, vnode.elm, refElm)
...
} else if (isTrue(vnode.isComment)) {
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
// 对于文本节点是没有tag的,所以会走到这个逻辑
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
// nodeOps.createElement(tag, vnode)
export function createElement (tagName: string, vnode: VNode): Element {
const elm = document.createElement(tagName)
...
return elm
}
接下来调用 createChildren
方法去创建子元素:
createChildren(vnode, children, insertedVnodeQueue)
function createChildren (vnode, children, insertedVnodeQueue) {
if (Array.isArray(children)) {
...
for (let i = 0; i < children.length; ++i) {
// vnode.elm作为父节点容器
createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
}
} else if (isPrimitive(vnode.text)) {
nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
}
}
createChildren
的逻辑很简单,实际上是遍历子虚拟节点,递归调用 createElm
,这是一种常用的深度优先的遍历算法,这里要注意的一点是在遍历过程中会把 vnode.elm
作为父容器的 DOM 节点占位符传入。
最后调用 insert
方法把 DOM
插入到父节点中,因为是递归调用,子元素会优先调用 insert
,所以整个 vnode
树节点的插入顺序是先子后父。来看一下 insert
方法:
insert(parentElm, vnode.elm, refElm)
function insert (parent, elm) {
...
appendChild(parent, elm)
}
export function appendChild (node: Node, child: Node) {
node.appendChild(child)
}
其实就是调用原生 DOM 的 API 进行 DOM 操作,看到这里就恍然大悟了,原来 Vue 是这样动态创建的 DOM。
再回到 patch
方法,首次渲染我们调用了 createElm
方法,这里传入的 parentElm
是 oldVnode.elm
的父元素,在我们的例子是 id 为 #app
div 的父元素,也就是 Body
节点;实际上整个过程就是递归创建了一个完整的 DOM 树并插入到 Body 上。
总结
那么至此我们从主线上把模板和数据如何渲染成最终的 DOM 的过程分析完毕了,我们可以通过下图更直观地看到从初始化 Vue 到最终渲染的整个过程。
转载自:https://juejin.cn/post/7176934781803266109