重学Vue【createElement函数做了什么?】

重学Vue源码,根据​​黄轶大佬​​的vue技术揭秘,逐个过一遍,巩固一下vue源码知识点,毕竟嚼碎了才是自己的,所有文章都同步在 公众号(道道i++++和++i++的区别里的前端栈) 和 ​​githubi++在c语言中是什么意思​​ 上。

正文

上一篇说到挂载是用 ​​mountvue.js前端开发实战Comphtml标签onent​​​ 函数来进行的,而 ​​mountC系统/运维ompnent​​​ 函数里面最主要的是一个​​updateComponent​​ 函数执行:

updateComponent = () => {
vm._update(vm._render(), hydrating)
}

这个函数在初次挂载和之后的更新都用到了,而 ​​_render()​​​ 方法最终会调用 ​​$option.render​​​ 函数, 函数主要的目的就是创建 ​​VNode​​​,除了 ​​Virtual DOM​​​ 的定义之外,还有一个 ​​createElement​​​ 函数,本篇就来说下 ​​createElement​​​ 都做了什么事情,它在 ​​src/core/vdom/create-element.js​​ 中。

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2

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)
}

​create响应式网页Element​​​ 方法支持六个参数, ​​context​​​ 其实其他就是vm实例, ​​tag​​​ 是 ​​VNode​​​ 的标签,​​data​​​ 就是 ​​VNode ​​​ 的html是什么意思数据,​​children​​ 就是一些子节点,后两个就是两个标识符,下面的:

if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}

是对传入参数的一种重载,简单一点就是对于传入的参数不一致的话,会做一点处理,把所有的参数都往后移一个,然后把 ​​data​​​ 改成 ​​null​​​。后面赋值一个 ​​normalizationType​​​vuejs设计与实现pdf,紧接着返回一其他综合收益属于什么科目个 ​​_createElement​​​ 函数,然后把刚才的 ​​noi++和++i怎么算rmalizationType​​​ 放进去,也就是说 ​​createElement​​​ 方法最终调用的是 ​​_createElement​​​,而 ​​createElement其他垃圾​​ 本身其实只对参数做了一层处理,而真正创建 ​​VNode​​​ 的是 ​​_createElement​​,那来看下这个函数的内容:

export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
if (isDef(data) && isDef((data: any).__ob__)) {
process.env.NODE_ENV !== 'production' && warn(
`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
'Always create fresh vnode data objects in each render!',
context
)
return createEmptyVNode()
}
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// warn against non-primitive key
if (process.env.NODE_ENV !== 'production' &&
isDef(data) && isDef(data.key) && !isPrimitive(data.key)
) {
if (!__WEEX__ || !('@binding' in data.key)) {
warn(
'Avoid using non-primitive value as key, ' +
'use string/number value instead.',
context
)
}
}
// support single function children as default scoped slot
if (Array.isArray(children) &&
typeof children[0] === 'function'
) {
data = data || {}
data.scopedSlots = { default: children[0] }
children.length = 0
}
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
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()
}
}

最上面:

if (isDef(data) && isDef((data: any).__ob__)) {
process.env.NODE_ENV !== 'production' && warn(
`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
'Always create fresh vnode data objects in each render!',
context
)
return createEmptyVNode()
}

它的意思是判断 ​​data​​​ 是不是一个响应式的对象,如果 ​html​data​其他和其它的区别​ 有 ​​__vue.js官网ob__​​​ 属性,那么它就是一个响应式的,在开响应式和自适应的区别发环其他应付款境中就会报错,然后返回创建一个空节点,就是说不允许 ​​VNode​​​ 的 ​​data​​​ 是响应式的。创建空 ​​VNode​​​ 代码在 ​​src/core/vdom/vnode.js​​ 中:

export const createEmptyVNode = (text: string = '') => {
const node = new VNode()
node.text = text
node.isComment = true
return node
}

接着它判断了 ​​data.is​​​,如果不为 ​​true​​​,也返回一个空 ​​VNode​​​ ,后面也是对 ​​data​​​ 做了一层判定,继续又简单的判断了 ​​children​​。

到后面:

if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}

对 ​​children​​​ 做了一层处理,首先 ​​children​​​ 是一个数组,这个处理是判断 ​​children​​​ 数组是单层嵌套还是多层,然后把它拍平,把 ​​children​​​ 里的每一项都变成 ​​VNode​​,代码如下:

// The template compiler attempts to minimize the need for normalization by
// statically analyzing the template at compile time.
//
// For plain HTML markup, normalization can be completely skipped because the
// generated render function is guaranteed to return Array<VNode>. There are
// two cases where extra normalization is needed:

// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
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
}

// 2. When the children contains constructs that always generated nested Arrays,
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
export function normalizeChildren (children: any): ?Array<VNode> {
return isPrimitive(children)
? [createTextVNode(children)]
: Array.isArray(children)
? normalizeArrayChildren(children)
: undefined
}

function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
const res = []
let i, c, lastIndex, last
for (i = 0; i < children.length; i++) {
c = children[i]
if (isUndef(c) || typeof c === 'boolean') continue
lastIndex = res.length - 1
last = res[lastIndex]
// nested
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)) {
// merge adjacent text nodes
// this is necessary for SSR hydration because text nodes are
// essentially merged when rendered to HTML strings
res[lastIndex] = createTextVNode(last.text + c)
} else if (c !== '') {
// convert primitive to vnode
res.push(createTextVNode(c))
}
} else {
if (isTextNode(c) && isTextNode(last)) {
// merge adjacent text nodes
res[lastIndex] = createTextVNode(last.text + c.text)
} else {
// default key for nested array children (likely generated by v-for)
if (isTrue(children._isVList) &&
isDef(c.tag) &&
isUndef(c.key) &&
isDef(nestedIndex)) {
c.key = `__vlist${nestedIndex}_${i}__`
}
res.push(c)
}
}
}
return res
}

以上就是 ​​_crehtml代码ateElement​​​ 做的第一件事情:拍平 ​​children​​​,第二件事就是创建 ​​vnode​​​,判定分别是:html元素,组件,或者无法识别的节点。最终响应式布局原理​vnode​​​ 就是 ​html是什么意思​render.js​​​ 里面 ​​ vnode = render.call(vm._renderProxy, vm.$createElement)​​​ 的第二个参数,而 ​​render.call​​​ 的结果就是 ​​ vm._c = (a, b, c, d) => c其他业务收入reateElement(vm, a, b, c, d, false)​​​ 中的 ​​createElement​​​系统/运维 的返回值,所以 ​​vnodevue.js官网​​ 最终就是 ​​createElement​​​ 的结果,接着 ​其他综合收益​createElement​​​ 是 ​​vm._render​​​ 的返回值,再回到之前的 ​​updateComponent​​:

updateComponent = () => {
vm._update(vm._render(), hydrating)
}

​vm._update​​​ 的第一个参数就是刚才的 ​​createE响应式和自适应的区别lement​​​ 的返回值,到此,拿到了一个完整的 ​​vnode​​​ ,下篇说一下 ​​_update ​​​其他业务收入 是将 ​​vnode​​​ 如何响应式原理变成真实的 ​​DOM​​ 节点。