vue渲染页面的流程_blog/vue实例化到渲染到页面(中).md at master · dinghuahua/blog · GitHub...

vue实例化到渲染到页面(中)

vm._update()方法内部执行了vm.patch(...),patch方法的作用是把 VNode 转换成真正的 DOM 节点。

方法在目录src/platforms/web/runtime/index.js中定义

// install platform patch function

Vue.prototype.patch = inBrowser ? patch : noop

patch方法是函数createPatchFunction返回的

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'

// the directive module should be applied last, after all

// built-in modules have been applied.

const modules = platformModules.concat(baseModules)

export const patch: Function = createPatchFunction({ nodeOps, modules })

// patch方法接受4个参数：

function patch (oldVnode, vnode, hydrating, removeOnly) { ... }

createElm

patch 的过程会调用 createElm 创建元素节点:

function createElm (

vnode,

insertedVnodeQueue,

parentElm,

refElm,

nested,

ownerArray,

index

) {

// ...

if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {

return

}

// ...

}

这里对createComponent(vnode, inserte