源码来自于 https://github.com/vuejs/vue
createElement
src/core/vdom/create-elemenet.js
const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2
// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
/* 兼容不传data的情况
* 通过判断data是不是数组,以及是不是基本类型,来决定data是否传入
* 如果没有传入,则将所有的参数向前赋值,且data = undefined
*/
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
/* 根据alwaysNormalize传不同的normalizationType
* normalizationType关系到后面children的扁平处理
* 没有children则不需要对normalizationType赋值,children和normalizationType就都是空值
*/
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
/* context ———— vm实例
* tag ———— vnode的tag标签,可以为字符串、组件以及函数
* data ———— vnode的data相关数据
* children ———— 它的一些子节点,包含一系列的vnode,形成vnode tree,完美映射到dom tree
*/
return _createElement(context, tag, data, children, normalizationType)
}
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
/* 如果data 且 data的__ob__已经定义,
* 说明data是被Observer观察的数据,不能用作虚拟节点的data
* 需要抛出警告,并返回一个空节点,
* 被监控的data不能被用作vnode渲染的数据的原因是:
* data在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
// tagName 绑定在data参数里面
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
// tagName不存在时,返回一个空节点
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// data.key 如果不是基础类型,则警告⚠️
// 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
)
}
}
// 当children中有function类型时,作slot 处理
// 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
}
/* simpleNormalizeChildren 的适用场景:render函数调用编译生成的。
* 按理来说render函数返回的已经是vnode类型,但是函数式组件返回的是一个数组而不是一个节点,
* 所以通过array.prototype.concat将多维数组转化为一维数组。
* normalizeChildren 的适用场景有两个:
* 1)render函数是用户手写的。当children只有一个节点的时候,调用createTextVNode。
* 2)当编译slot、v-for的时候会产生嵌套数组的情况,会调用normalizeArrayChildren。
* normalizeArrayChildren接收2个参数:children表示要规范的子节点,nestedIndex表示嵌套的索引。
*/
if (normalizationType === ALWAYS_NORMALIZE) { // 手写render函数
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) { // 编译render函数
children = simpleNormalizeChildren(children)
}
// 经过上面规范化children后,接下来去创建一个VNode实例
let vnode, ns
/* 判断 tag 是否字符串
* @是:可以确定该 VNode 是标签元素
* @否:说明其为 组件选项对象,直接走createComponent逻辑
* 为什么只有这两个选项?先看最开始定义貌似有4个:
* tag?: string | Class<Component> | Function | Object
* 但其实,当 tag 为Function时,其返回值类型 为string/Object
*/
if (typeof tag === 'string') {
let Ctor
// namespace 处理
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
/* 如果是内置的一些节点,则直接创建一个普通的VNode
* 如果是已注册的组件名,则通过createComponent创建一个组件类型的VNode
* 否则创建一个未知标签的VNode
*/
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)
}
// 判定VNode类型,对应返回
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
// namespace 相关处理
if (isDef(ns)) applyNS(vnode, ns)
// 进行 Observer 相关绑定
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
normalize:children的规范化
src/core/vdom/helpers/normalize-children.js
// 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++) {
/* 如果children中有一个是数组,
* 则将整个children作为参数组用concat连接,
* 可以得到每个子元素都是vnode的children,
* 适用于只有一级嵌套数组的情况。
*/
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> {
/* 判断是否基础类型
* @是:创建文本节点
* @否:判断是否数组
* @是:作normalizeArrayChildren处理
* @否:返回undefined
* 最终效果: 也是为了返回一组一维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的值
c = children[i]
if (isUndef(c) || typeof c === 'boolean') continue
lastIndex = res.length - 1
last = res[lastIndex]
// nested
/* 三种情况:数组、基础节点、正常的VNode
* 其共同点:merge adjacent text nodes
* 即:如果存在两个连续的text节点,则合并成一个text节点
*/
if (Array.isArray(c)) {
if (c.length > 0) {
// 递归调用函数 normalizeArrayChildren
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);
* [].push.apply(res, c);
* Array.prototype.push.apply(res, c);
* 优点:不会生成新的数组
*/
res.push.apply(res, c)
}
} else if (isPrimitive(c)) {
/* 判断最后一个结点是不是文本节点,
* @是:将其与该元素合并为一个文本节点,放到res[lastIndex]
* @否:把这个基本类型转换为文本节点(VNode),push 进 res
*/
if (isTextNode(last)) {
// merge adjacent text nodes
// this is necessary for SSR hydration because text nodes are
// essentially merged when rendered to HTML strings
// 这是SSR hydration所必需的,因为文本节点渲染成html时基本上都是合并的
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)
// 如果children是一个列表且列表还存在嵌套的情况,则根据nestedIndex去更新它的key
if (isTrue(children._isVList) &&
isDef(c.tag) &&
isUndef(c.key) &&
isDef(nestedIndex)) {
c.key = `__vlist${nestedIndex}_${i}__`
}
res.push(c)
}
}
}
return res
}
createEmptyVNode
src/core/vdom/vnode.js
export const createEmptyVNode = (text: string = '') => {
const node = new VNode()
node.text = text
node.isComment = true // 注释vnode
return node
}
创建一个空的Vnode,有效属性只有text和isComment。
注释节点
真实的注释节点:
<!-- 注释节点 -->
VNode描述:
createEmptyVNode ('注释节点')
{
text: '注释节点',
isComment: true
}
文本节点
VNode描述:
createTextVNode('文本节点')
{
text: '文本节点'
}