Vue源码分析一：Vue中的data是如何驱动视图渲染的？
前言
你有没有发现，从小到大，你好像历来没有把一件事情作好过？html
说明
这将是一个Vue源码解析的系列文章，该篇是第一章，后续文章“Vue源码分析二：响应式原理，视图更新？(juejin.im/post/5e0dd4…)”持续输出中...vue
正文
你们都知道，Vue的核心思想就是经过数据驱动视图更新，咱们对视图的修改全都是经过修改data去触发视图的更新，那么，它的底层原理究竟是怎样的呢？本次的源码分析是基于Vue2.6.10进行的，接下来，咱们就来一探究竟！node
1、new Vue
代码试例：
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
复制代码
那么message究竟是如何渲染到视图上的呢？git
源码分析：
源码路径：src/core/instance/index.jsgithub
/**
* Vue构造函数
* @param {object} options new Vue的时候咱们传入的那个对象
*/
function Vue (options) {
// ...
/* 初始化 */
this._init(options)
}
复制代码
咱们再来看一下 _init() 作了啥子？web
源码路径：src/core/instance/init.js算法
Vue.prototype._init = function (options?: Object) {
/* 把Vue赋值给vm */
const vm: Component = this;
/* 能够看出$options是经过mergeOptions这个方法去合并合并咱们传入的options获得的 */
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
// ...
/* 初始化生命周期 */
initLifecycle(vm)
/* 初始化事件对象 */
initEvents(vm)
/* 初始化render */
initRender(vm)
/* 触发beforeCreate钩子 */
callHook(vm, 'beforeCreate')
/* initState 初始化props, data, methods, watch, computed等属性 */
initState(vm)
/* 初始化created钩子 */
callHook(vm, 'created')
// ...
if (vm.$options.el) {
/* 当el属性存在，执行挂载组件 */
vm.$mount(vm.$options.el)
}
}
复制代码
上述源码能够很清楚的发现，_init这个方法主要作了合并配置(options)，初始化生命周期，事件中心，渲染函数，以及props, data, methods, watch, computed等属性，而且props, data, methods, watch, computed是在beforeCreate和created这两个生命周期中间才发生的，这也就验证了为何咱们不能在beforeCreate生命周期中去修改data,props等的缘由，嘿嘿嘿😊。 最后，咱们能够看到若是$options里有el，则触发$mount()方法，进行组件挂载，目标就是把模版渲染成Dom。编程
2、$mount组件挂载
由于
$mount这个方法与平台（web, weex）还有构建方式都有关系，不一样的平台有不一样的挂载方式，所以Vue源码中实现了好几种，咱们主要分析编译版本的$mount。开搞开搞！数组
源码路径：src/platform/web/entry-runtime-with-compiler.js浏览器
/* 把本来不带编译的$mount方法保存下来，在最后会调用 */
const mount = Vue.prototype.$mount
/**
* 从新定义$mount
* @param {string | Element} el 挂载标签
* @param {boolean} hydrating 服务端渲染标志
*/
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* Vue不容许挂载在body或者html根结点上 */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
/* 若没有render方法，则把el或者template字符串转换成render方法 */
if (!options.render) {
let template = options.template
/* 处理模版template，编译成render函数，render不存在的时候才会编译template,不然优先使用render */
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
/* 当template为dom节点的时候 */
template = template.innerHTML
} else {
// ...
}
} else if (el) {
/* 获取template的outerHTML */
template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
/* 编译的入口, 将template编译成render函数，
* staticRenderFns是编译优化，static静态不须要在VNode更新时进行patch，优化性能
*/
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
/* 将编译成的render赋值给options.render */
options.render = render
options.staticRenderFns = staticRenderFns
// ...
}
}
/* 最后执行一开始缓存下来的原型上的mount */
return mount.call(this, el, hydrating)
}
复制代码
解析：首先缓存原型上的mount,这个方法不带编译，而后最后去调用。该方法主要做用是将el和template这俩字符串转换成render方法，这是Vue的一个“在线编译”过程，其中编译出来的staticRenderFns属于静态渲染方法，这个方法主要去渲染一些静态文案，标签等，那么在虚拟Dom进行更新的时候就不会触发patch()和diff算法去计算这些静态元素再次更新，属于Vue的一个性能优化。
原型上的$mount
源码路径：src/platform/web/runtime/index.js
// public mount method
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean // 服务端渲染相关的参数
): Component {
/* 在浏览器环境下转换成DOM对象 */
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
复制代码
解析：咱们能够看到，尤大大清晰的标明了public mount method，也就是说这个方法是用来复用滴。咱们发现$mount主要调用了mountComponent。
源码路径：src/core/instance/lifecycle.js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el;
/* 触发beforeMount钩子 */
callHook(vm, 'beforeMount')
/* 该方法调用vm._render方法先生成虚拟Node，最终调用vm._update更新 DOM */
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 = () => {
/* _update接受的第一个参数是render后的虚拟dom */
vm._update(vm._render(), hydrating)
}
}
/* 实例化Watcher(观察者对象)，执行updateComponent，触发更新 */
new Watcher(vm, updateComponent, noop, {
before () {
/* 更新前先判断实例是否已经挂载而且没有被销毁 */
if (vm._isMounted && !vm._isDestroyed) {
/* 执行beforeUpdate钩子 */
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
/* vm.$vnode表示Vue实例的父虚拟Node,为null表示当前是根Vue实例*/
if (vm.$vnode == null) {
// 表示根实例已经挂载
vm._isMounted = true
// 执行mounted钩子函数
callHook(vm, 'mounted')
}
return vm
}
复制代码
解析：该方法核心是实例化Watcher（观察者对象），调用updateComponent，updateComponent里先调用 vm._render 方法先生成虚拟 Node，最终调用 vm._update 更新 DOM。Watcher主要有两个做用：
①初始化渲染虚拟Dom；
②当检测到data数据发生变化的时候执行更新；
所以接下来咱们会分析vm._render和vm._update这俩核心方法，come on!
3、render
源码路径：src/core/instance/render.js
/* 渲染出虚拟dom */
Vue.prototype._render = function (): VNode {
const vm: Component = this
const { render, _parentVnode } = vm.$options
let vnode
try {
// ...
/* 虚拟node */
vnode = render.call(vm._renderProxy, vm.$createElement)
} catch (e) {
// ...
}
// ...
if (!(vnode instanceof VNode)) {
if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
warn(
'Multiple root nodes returned from render function. Render function ' +
'should return a single root node.',
vm
)
}
/* render报错的时候建立一个空的虚拟节点 */
vnode = createEmptyVNode()
}
// set parent
vnode.parent = _parentVnode
return vnode
}
复制代码
解析：主要就是调用了render()去渲染出虚拟dom。所以咱们一开始的例子：
<div id="app">
{{ message }}
</div>
复制代码
编写成render函数就是介个样子：
render: function (createElement) {
return createElement('div', {
attrs: {
id: 'app'
},
}, this.message)
}
复制代码
能够发现：render接受一个“createElement”参数，而后咱们再看上述源码：
vnode = render.call(vm._renderProxy, vm.$createElement)
复制代码
实锤了：render函数中的 createElement 方法就是 vm.$createElement 方法。而vm.$createElement是在initRender方法中定义的
export function initRender (vm: Component) {
// ...
/* 被模版编译成render函数的时候使用,建立VNode节点 */
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
/* 用户手写render函数时调用 */
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}
复制代码
解析：createElement建立了VNode(虚拟节点)，那么咱们分别来看一下VNode和createElement。
4、VNode(虚拟节点)
源码路径：src/core/vdom/vnode.js
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void;
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
componentInstance: Component | void; // component instance
parent: VNode | void; // component placeholder node
// strictly internal
raw: boolean; // contains raw HTML? (server only)
isStatic: boolean; // hoisted static node
isRootInsert: boolean; // necessary for enter transition check
isComment: boolean; // empty comment placeholder?
isCloned: boolean; // is a cloned node?
isOnce: boolean; // is a v-once node?
asyncFactory: Function | void; // async component factory function
asyncMeta: Object | void;
isAsyncPlaceholder: boolean;
ssrContext: Object | void;
fnContext: Component | void; // real context vm for functional nodes
fnOptions: ?ComponentOptions; // for SSR caching
devtoolsMeta: ?Object; // used to store functional render context for devtools
fnScopeId: ?string; // functional scope id support
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
/* 当前节点的标签名 */
this.tag = tag
/* 当前节点对应的对象，包含了一些具体的数据信息，是一个VNodeData类型 */
this.data = data
/* 当前节点的子节点，数组 */
this.children = children
/* 当前节点的文本 */
this.text = text
/* 当前虚拟节点对应的真实dom节点 */
this.elm = elm
/* 当前节点的名字空间 */
this.ns = undefined
/* 编译做用域 */
this.context = context
/* 函数化组件做用域 */
this.fnContext = undefined
this.fnOptions = undefined
this.fnScopeId = undefined
/* 节点的key属性，被看成节点的标志，用以优化 */
this.key = data && data.key
/* 组件的options选项 */
this.componentOptions = componentOptions
/* 当前节点对应的组件实例 */
this.componentInstance = undefined
/* 当前节点的父节点 */
this.parent = undefined
/* 是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false */
this.raw = false
/* 静态节点的标志 */
this.isStatic = false
/* 是否做为根节点插入 */
this.isRootInsert = true
/* 是否为注释节点 */
this.isComment = false
/* 是否为克隆节点 */
this.isCloned = false
/* 是否有v-once指令 */
this.isOnce = false
this.asyncFactory = asyncFactory
this.asyncMeta = undefined
this.isAsyncPlaceholder = false
}
get child (): Component | void {
return this.componentInstance
}
}
复制代码
解析：能够看出，在 Vue.js 中，Virtual DOM 就是用 VNode 这么一个 Class类 去描述的！VNode是对真实DOM的一种抽象描述，它是用来映射到真实DOM到渲染，它的核心属性也就标签名、数据、子节点、键值等，因此看到上述那么多属性密密麻麻，不要产生密集恐惧症哈哈，不要怕，雄起！！！那么映射的过程当中，主要经历了create、diff、patch等过程，而create就是经过咱们上边提到的createElement来实现的。
5、createElement
源码路径：src/core/vdom/create-elemenet.js
/* 对_createElement的封装，可传入一些灵活的参数，最后调用_createElement */
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}
复制代码
/**
* 建立元素
* @param {Component} context VNode上下文环境
* @param {string} tag 元素标签
* @param data VNode的数据
* @param children 当前VNode的子节点
* @param normalizationType 子节点规范的类型（参考 render 函数是编译生成的仍是用户手写的。）
* @returns vnode 建立的节点
*/
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
// ...
/* 根据render的类型选择规范children的方法 */
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
// ...
/* 建立VNode */
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// ...
/*tag是一个string类型，建立一个普通的VNode */
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
/* 若是是一个已注册的组件名，建立一个组件类的VNode */
vnode = createComponent(Ctor, data, context, children, tag)
} else {
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
/* tag不是string，则直接建立组件类VNode */
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
复制代码
解析：以上主要有两个核心流程：
①children的规范化（VNode的子节点）；
②VNode 的建立；
children规范化：
因为 Virtual DOM 其实是一个树状结构，每个 VNode 可能会有若干个子节点，这些子节点应该也是 VNode 的类型。_createElement 接收的第 4 个参数 children 是任意类型的，所以咱们须要把它们规范成 VNode 类型。
这里根据 normalizationType 的不一样（就是render是用户手写的仍是Vue编译的），当render是Vue编译的，则调用 normalizeChildren(children)；若是render是用户手写的，则调用 simpleNormalizeChildren(children) 方法。
源码路径：src/core/vdom/helpers/normalzie-children.js
/* 使用场景是render函数是编译生成的 */
export function simpleNormalizeChildren (children: any) {
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
return Array.prototype.concat.apply([], children)
}
}
return children
}
复制代码
解析：理论上，编译生成的children应该已是VNode类型了，但这里有一个意外，就是 functional component 函数式组件返回的是一个数组而不是一个根节点，因此会经过 Array.prototype.concat 方法把整个 children 数组打平，让它的深度只有一层，诶，是否是又学了一招打平数组的方法哈哈😊；
/* render函数是用户手写的 */
export function normalizeChildren (children: any): ?Array<VNode> {
return isPrimitive(children)
? [createTextVNode(children)]
: Array.isArray(children)
? normalizeArrayChildren(children)
: undefined
}
复制代码
解析：这方法应用在两个场景：
①children只有一个节点的时候，会调用createTextVNode建立一个文本节点的VNode；
②当编译v-for或者slot的时候，children多是个数组，调用normalizeArrayChildren；
/**
* 规范children
* @param {any} children 子节点
* @param {string} nestedIndex 嵌套层数的索引
*/
function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
const res = []
let i, c, lastIndex, last
for (i = 0; i < children.length; i++) {
/* 获取到children的每一个节点 */
c = children[i]
if (isUndef(c) || typeof c === 'boolean') continue
lastIndex = res.length - 1
last = res[lastIndex]
/* 判断children每一个节点是不是数组，是的话循环递归 */
if (Array.isArray(c)) {
if (c.length > 0) {
c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
// merge adjacent text nodes
if (isTextNode(c[0]) && isTextNode(last)) {
res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
c.shift()
}
res.push.apply(res, c)
}
} else if (isPrimitive(c)) {
if (isTextNode(last)) {
res[lastIndex] = createTextVNode(last.text + c)
} else if (c !== '') {
res.push(createTextVNode(c))
}
} else {
if (isTextNode(c) && isTextNode(last)) {
res[lastIndex] = createTextVNode(last.text + c.text)
} else {
/* 给children的每一层设置惟一的key */
if (isTrue(children._isVList) &&
isDef(c.tag) &&
isUndef(c.key) &&
isDef(nestedIndex)) {
c.key = `__vlist${nestedIndex}_${i}__`
}
res.push(c)
}
}
}
return res
}
复制代码
解析：normalizeArrayChildren主要做用就是遍历 children，得到单个节点 c，而后对 c 的类型判断，若是是一个数组类型，则递归调用 normalizeArrayChildren; 若是是基础类型，则经过 createTextVNode 方法转换成 VNode 类型；不然就已是 VNode 类型了，若是 children 是一个列表而且列表还存在嵌套的状况，则根据 nestedIndex 去更新它的 key。
通过上述一顿操做，就把children 变成了一个类型为 VNode 的 Array。
回到_createElement里的建立VNode的部分,此时的children已经被教育好了，乖了，老老实实的编程VNode类型了：
/* 建立VNode */
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// ...
/*tag是一个string类型，建立一个普通的VNode */
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
/* 若是是一个已注册的组件名，建立一个组件类的VNode */
vnode = createComponent(Ctor, data, context, children, tag)
} else {
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
/* tag不是string，则直接建立组件类VNode */
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
复制代码
解析：先对 tag 作判断，若是是 string 类型，则接着判断若是是内置的一些节点，则直接建立一个普通 VNode，若是是为已注册的组件名，则经过 createComponent 建立一个组件类型的 VNode，不然建立一个未知的标签的 VNode。 若是是 tag 一个 Component 类型，则直接调用 createComponent 建立一个组件类型的 VNode 节点。
所以，咱们大体了解了 createElement 建立 VNode 的过程，每一个 VNode 有 children，children 每一个元素也是一个 VNode，这样就造成了一个 VNode Tree，它很好的描述了咱们的 DOM Tree。
那么VNode已经被建立出来了，那它是如何渲染成真实DOM的呢？答案：经过vm._update完成。
6、update
源码路径：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
/* 尚未vnode的时候即第一次渲染 */
if (!prevVnode) {
/**
* 初始化渲染
* @param {Element} vm.$el Dom对象
*/
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主要执行了vm.__patch__方法。
源码路径：src/platforms/web/runtime/index.js
Vue.prototype.__patch__ = inBrowser ? patch : noop
复制代码
能够发现，这个方法在不一样的平台，不一样的环境有不一样的表现方式，咱们只看它在web平台的表现方式；
源码路径：src/platforms/web/runtime/patch.js
import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'
/* 定义了一些模块的钩子函数的实现 */
const modules = platformModules.concat(baseModules)
export const patch: Function = createPatchFunction({ nodeOps, modules })
复制代码
解析：该方法的定义是调用 createPatchFunction 方法的返回值，这里传入了一个对象，包含 nodeOps 参数和 modules 参数。其中，nodeOps 封装了一系列 DOM 操做的方法，modules 定义了一些模块的钩子函数的实现。
接下来咱们来看createPatchFunction的实现：
源码路径：src/core/vdom/patch.js
export function createPatchFunction (backend) {
// ...
/**
* 功能说明
*
* @param {Element} oldVnode 旧的Vnode节点，能够为空或者是一个Dom对象
* @param {Element} vnode 执行_render后返回的VNode节点
* @param hydrating 是不是服务端渲染
* @param removeOnly 给 transition-group 用的
*/
return function patch (oldVnode, vnode, hydrating, removeOnly) {
/* vnode不存在直接调用销毁钩子 */
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
/* oldVnode未定义的时候，其实也就是root节点，建立一个新的节点 */
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
/* 标记旧的VNode是否有nodeType */
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
/* 是同一个节点的时候直接修改现有的节点 */
/* 注意⚠️：当oldVnode与vnode在sameVnode的时候才会进行patchVnode，也就是新旧VNode节点断定为同一节点的时候才会进行patchVnode这个过程，不然就是建立新的DOM，移除旧的DOM */
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
// mounting to a real element
// check if this is server-rendered content and if we can perform
// a successful hydration.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
/* 当旧的VNode是服务端渲染的元素， hydrating=true*/
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
/*须要合并到真实DOM上*/
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
/*调用insert钩子*/
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode
} else if (process.env.NODE_ENV !== 'production') {
warn(
'The client-side rendered virtual DOM tree is not matching ' +
'server-rendered content. This is likely caused by incorrect ' +
'HTML markup, for example nesting block-level elements inside ' +
'<p>, or missing <tbody>. Bailing hydration and performing ' +
'full client-side render.'
)
}
}
// either not server-rendered, or hydration failed.
// create an empty node and replace it
/*若是不是服务端渲染或者合并到真实DOM失败，则建立一个空的VNode节点替换它*/
oldVnode = emptyNodeAt(oldVnode)
}
// replacing existing element
/*取代现有元素*/
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
createElm(
vnode,
insertedVnodeQueue,
// extremely rare edge case: do not insert if old element is in a
// leaving transition. Only happens when combining transition +
// keep-alive + HOCs. (#4590)
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
// update parent placeholder node element, recursively
if (isDef(vnode.parent)) {
/* 组件根节点被替换，遍历更新父节点element */
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
for (let i = 0; i < cbs.destroy.length; ++i) {
cbs.destroy[i](ancestor)
}
ancestor.elm = vnode.elm
if (patchable) {
/*调用create回调*/
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, ancestor)
}
// #6513
// invoke insert hooks that may have been merged by create hooks.
// e.g. for directives that uses the "inserted" hook.
const insert = ancestor.data.hook.insert
if (insert.merged) {
// start at index 1 to avoid re-invoking component mounted hook
for (let i = 1; i < insert.fns.length; i++) {
insert.fns[i]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// destroy old node
if (isDef(parentElm)) {
/*移除老节点*/
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
/*调用destroy钩子*/
invokeDestroyHook(oldVnode)
}
}
}
/*调用insert钩子*/
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
}
复制代码
解析：createPatchFunction内部定义了一系列的辅助方法，前边的内容咱们暂时不看，代码老长了，心累💔。 上边的源码咱们能够先不看，经过例子来一步一步分析。 它主要返回了patch这个方法，即咱们上边提到的vm.__patch__;
先看patch这个方法，它接受的参数我已经在源码里标明了；
咱们来拿一开始的例子解析：
var app = new Vue({
el: '#app',
render: function (createElement) {
return createElement('div', {
attrs: {
id: 'app'
},
}, this.message)
},
data: {
message: 'Hello Vue!'
}
})
复制代码
而后咱们在 vm._update 的方法里是这么调用 patch 方法的：
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
复制代码
分析一波：咱们的例子一上来确定是首次渲染，那么执行patch的时候，传入的vm.$el就是id为app的DOM对象了，而vnode就是上边咱们经过vm._render渲染以后的虚拟VNode。先看patch中的部分逻辑：
/* 标记oldVnode是否有nodeType，是不是真实Dom */
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
/* 当判断出新老node属于同一个节点的时候直接修改现有的节点 */
/* 注意⚠️：当oldVnode与vnode在sameVnode的时候才会进行patchVnode，也就是新旧VNode节点断定为同一节点的时候才会进行patchVnode这个过程，不然就是建立新的DOM，移除旧的DOM */
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
// ...
if (isTrue(hydrating)) {
/*须要合并到真实DOM上*/
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
/*调用insert钩子*/
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode
}
// ...
}
/*若是不是服务端渲染或者合并到真实DOM失败，则建立一个空的VNode节点替换它*/
oldVnode = emptyNodeAt(oldVnode)
}
/*取代现有元素*/
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
/* 建立真实节点 */
createElm(
vnode,
insertedVnodeQueue,
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
if (isDef(vnode.parent)) {
/* 组件根节点被替换，遍历更新父节点element */
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
for (let i = 0; i < cbs.destroy.length; ++i) {
cbs.destroy[i](ancestor)
}
ancestor.elm = vnode.elm
if (patchable) {
/*调用create回调*/
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, ancestor)
}
const insert = ancestor.data.hook.insert
if (insert.merged) {
for (let i = 1; i < insert.fns.length; i++) {
insert.fns[i]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// destroy old node
if (isDef(parentElm)) {
/*移除老节点*/
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
/*调用destroy钩子*/
invokeDestroyHook(oldVnode)
}
}
复制代码
解析：经过源码和咱们的例子能够看出：咱们传入的oldVnode其实是Dom container,也就是vm.$el，接下来又经过 emptyNodeAt 方法把 oldVnode 转换成 VNode 对象，而后再调用 createElm 方法，建立真实的节点：
/* 将虚拟节点建立成真实节点，并插入到它的父节点中 */
function createElm (
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
// ...
vnode.isRootInsert = !nested // for transition enter check
/* createComponent建立子组件，当前返回值为false */
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
if (isDef(tag)) {
// ...
/* 调用平台 DOM 的操做去建立一个占位符元素 */
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
setScope(vnode)
if (__WEEX__) {
// ...
} else {
/* 建立子元素 */
createChildren(vnode, children, insertedVnodeQueue)
if (isDef(data)) {
/* 执行全部的 create 的钩子并把 vnode push 到 insertedVnodeQueue */
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
} else if (isTrue(vnode.isComment)) {
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}
复制代码
解析：先调用createChildren去建立子元素，而后执行invokeCreateHooks把虚拟VNode所有推到insertedVnodeQueue中去，再执行insert把Dom插入到父节点中去。
先来看一下createChildren：
/* 建立子元素 */
function createChildren (vnode, children, insertedVnodeQueue) {
if (Array.isArray(children)) {
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(children)
}
for (let i = 0; i < children.length; ++i) {
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，这是一种经常使用的深度优先的遍历算法。
invokeCreateHooks先不看了，有兴趣到能够本身看一下
再看：insert
/* 递归调用该方法，将dom循环插入parent节点中去 */
function insert (parent, elm, ref) {
if (isDef(parent)) {
if (isDef(ref)) {
if (nodeOps.parentNode(ref) === parent) {
nodeOps.insertBefore(parent, elm, ref)
}
} else {
nodeOps.appendChild(parent, elm)
}
}
}
复制代码
解析：由于是递归调用，子元素会优先调用 insert，因此整个 vnode 树节点的插入顺序是先子后父。
看看insertBefore和appendChild:
源码路径： src/platforms/web/runtime/node-ops.js
export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
parentNode.insertBefore(newNode, referenceNode)
}
export function appendChild (node: Node, child: Node) {
node.appendChild(child)
}
复制代码
解析：是否是恍然大明白儿了，是的，Vue就是调用DOM的原生Api进行DOM操做的。
而后回到咱们的例子：
在 createElm 过程当中，若是 vnode 节点不包含 tag，则它有多是一个注释或者纯文本节点，能够直接插入到父元素中。在咱们这个例子中，最内层就是一个文本 vnode，它的 text 值取的就是以前的 this.message 的值 Hello Vue!
再回到 patch 方法，首次渲染咱们调用了 createElm 方法，这里传入的 parentElm 是 oldVnode.elm 的父元素，在咱们的例子是 id 为 #app div 的父元素，也就是 Body；实际上整个过程就是递归建立了一个完整的 DOM 树并插入到 Body 上。
7、总结
好啦，终于叭叭儿完了，好累好累😄。
那么最后，咱们来总结一会儿，是否是忘的差很少了啊😂。
先放一张黄轶老师的图：
_init方法，主要是进行了一系列的初始化渲染函数，而后执行了$mount方法，把el和template转成render方法，而后调用了mountComponent方法，执行了
vm._render 方法，而后
_render生成VNode虚拟DOM，接着经过
vm._update，patch方法，调用createElem()，循环递归把children插入到他们的父节点中去，将虚拟DOM渲染成真实DOM，哈哈，是否是又巩固了一波。
后言
本文章主要参考了：
1.黄轶老师的源码分析：(ustbhuangyi.github.io/vue-analysi…)
2.染墨大佬的源码分析：(github.com/answershuto…) 第一次在掘金发表文章，但愿各路大佬批评指正文中的错误表达，该表扬👍就表扬，该喷就喷（个人心里相对仍是比较坚强的😢）
相关文章
- 1. vue源码分析：渲染篇
- 2. vue源码分析：渲染篇（转载）
- 3. Vue源码解析(一)-模版渲染
- 4. 6. Vue内部是如何渲染视图
- 5. Vue源码解析(1)-模版渲染
- 6. vue源码分析（二）-从new Vue到渲染到页面
- 7. Vue是如何渲染页面的，渲染过程以及原理代码
- 8. 2. vue源码分析——数据驱动
- 9. vue从后台获取数据赋值给data，如何渲染更细视图
- 10. vue中的条件渲染
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • 如何伪造ARP响应？ - TCP/IP教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章