前言
前面的文章中提到组件更新时，需要先执行编译器生成的 渲染函数 得到组件的 vnode，而 渲染函数 生成 vnode 则是通过其中的 _c、_l、、_v、_s 等方法实现的. 比如：
普通节点被编译成了可执行_c函数v-for节点被编译成了可执行的_l函数- …
那么下面就一起来了解一下，什么是 render helper ?
深入源码
入口位置
通过 generate() 方法的返回值中的 { render: 'with(this){return ${code}}' } 可知，_c、_l、、_v、_s 等方法是属于实例上的方法，当然这需要你对 js 中 with(){} 方法有一定的了解.
既然是实例方法，那么在之前 vue 中的实例 文章中有提到对应文件位置：
src\core\instance\render.js.
export function generate(
ast: ASTElement | void, // ast 对象
options: CompilerOptions // 编译选项
): CodegenResult {
/*
实例化 CodegenState 对象，参数是编译选项，最终得到 state ，其中大部分属性和 options 一样
*/
const state = new CodegenState(options)
/*
生成字符串格式的代码，比如：'_c(tag, data, children, normalizationType)'
- data 为节点上的属性组成 JSON 字符串，比如 '{ key: xx, ref: xx, ... }'
- children 为所有子节点的字符串格式的代码组成的字符串数组，格式：
`['_c(tag, data, children)', ...],normalizationType`，
- normalization 是 _c 的第四个参数，表示节点的规范化类型（非重点，可跳过）
注意：code 并不一定就是 _c，也有可能是其它的，比如整个组件都是静态的，则结果就为 _m(0)
*/
const code = ast ? (ast.tag === 'script' ? 'null' : genElement(ast, state)) : '_c("div")'
return {
render: `with(this){return ${code}}`,
staticRenderFns: state.staticRenderFns
}
}
installRenderHelpers() 方法
根据上面的 src\core\instance\render.js 找到了对应的 renderMixin()，其中很明显 installRenderHelpers() 就是我们需要找的.
export function renderMixin (Vue: Class<Component>) {
// install runtime convenience helpers
// 在组件实例上挂载一些运行时需要用到的工具方法
installRenderHelpers(Vue.prototype)
// ...
}
文件位置：src\core\instance\render-helpers\index.js
/**
* 在实例上挂载简写的渲染工具函数，这些都是运行时代码
* 这些工具函数在编译器生成的渲染函数中被使用到了
* @param target Vue 实例
*/
export function installRenderHelpers (target: any) {
/**
v-once 指令的运行时帮助程序，为 VNode 加上打上静态标记
注意：包含 v-once 指令的节点都被当作静态节点处理:
node.isStatic = true
node.key = key
node.isOnce = true
*/
target._o = markOnce
// 使用 parseFloat() 将值转换为数字
target._n = toNumber
/*
如果传入值为 null，直接返回 ''
如果是数组或者是普通对象，调用 JSON.Stringify() 序列化引用类型
否则使用 String 转换为字符串
*/
target._s = toString
/*
运行时渲染 v-for 列表的帮助函数，循环遍历 val 值，
依次为每一项执行 render 方法生成 VNode，最终返回一个 VNode 数组
*/
target._l = renderList
target._t = renderSlot
/*
判断两个值是否相等：数组、普通对象、Date 对象、基本类型（全部转成字符串比较）
*/
target._q = looseEqual
/**
相当于数组的 indexOf() 方法，本质就是调用 looseEqual()
*/
target._i = looseIndexOf
/*
运行时负责生成静态树的 VNode 的帮助程序：
1、执行 staticRenderFns 数组中指定下标的渲染函数，生成静态树的 VNode 并缓存，
下次在渲染时从缓存中直接读取（isInFor 必须为 true）
2、为静态树的 VNode 打静态标记
*/
target._m = renderStatic
target._f = resolveFilter
target._k = checkKeyCodes
target._b = bindObjectProps
/*
为文本节点创建 VNode，其中:
VNode.text = 'xxx'
VNode.isComment = false
*/
target._v = createTextVNode
/*
为空节点创建 VNode，其中：
VNode.text = 'xxx'
VNode.isComment = true
*/
target._e = createEmptyVNode
target._u = resolveScopedSlots
target._g = bindObjectListeners
target._d = bindDynamicKeys
target._p = prependModifier
}
target._o = markOnce
文件位置：src\core\instance\render-helpers\index.js
markOnce() 方法
/**
* Runtime helper for v-once.
* Effectively it means marking the node as static with a unique key.
* 使用唯一的 key 将节点标记为静态节点
*/
export function markOnce (
tree: VNode | Array<VNode>,
index: number,
key: string
) {
/*
<div v-once key="mydiv"><div>
保证 key 的唯一，即 key = `__once__${index}_mydiv`
*/
markStatic(tree, `__once__${index}${key ? `_${key}` : ``}`, true)
return tree
}
markStatic() 方法
function markStatic (
tree: VNode | Array<VNode>,
key: string,
isOnce: boolean
) {
// tree 为数组
if (Array.isArray(tree)) {
// 遍历 tree 为每个 tree[i] 通过 markStaticNode() 进行标记
for (let i = 0; i < tree.length; i++) {
if (tree[i] && typeof tree[i] !== 'string') {
markStaticNode(tree[i], `${key}_${i}`, isOnce)
}
}
} else {
// tree 不是数组直接调用 markStaticNode() 进行标记
markStaticNode(tree, key, isOnce)
}
}
markStaticNode() 方法
/*
为 VNode 打静态标记，在 VNode 上添加三个属性：
{ isStatick: true, key: xx, isOnce: true or false }
*/
function markStaticNode (node, key, isOnce) {
node.isStatic = true
node.key = key
node.isOnce = isOnce
}
target._l = renderList
文件位置：src\core\instance\render-helpers\render-list.js
/**
* Runtime helper for rendering v-for lists.
*
* 用于呈现 v-for 列表的运行时帮助程序
* v-for 原理：
* 通过循环为类型为 数组、字符串、数字、对象 调用 render 方法，
* 得到一个 VNode 数组
*/
export function renderList (
val: any,
render: (
val: any,
keyOrIndex: string | number,
index?: number
) => VNode
): ?Array<VNode> {
let ret: ?Array<VNode>, i, l, keys, key
/*
val 是数组 或者 是字符串，如：
<div v-for="item in [xxx,xxx,...]"></div>
<div v-for="item in 'hello'"></div>
*/
if (Array.isArray(val) || typeof val === 'string') {
ret = new Array(val.length)
// 通过循环为每个元素或者字符调用 render 方法，得到 VNode 节点
for (i = 0, l = val.length; i < l; i++) {
ret[i] = render(val[i], i)
}
} else if (typeof val === 'number') {
/*
val 是数字，如：
<div v-for="item in 10"></div>
*/
ret = new Array(val)
// 循环为每个数字调用 render 方法，得到 VNode 节点
for (i = 0; i < val; i++) {
ret[i] = render(i + 1, i)
}
} else if (isObject(val)) {
// val 是对象
// val 是个可迭代的对象
if (hasSymbol && val[Symbol.iterator]) {
ret = []
/*
获取可迭代对象实例，通过 while 循环为当前迭代对象，
调用 render 方法，得到 VNode 节点
*/
const iterator: Iterator<any> = val[Symbol.iterator]()
let result = iterator.next()
while (!result.done) {
ret.push(render(result.value, ret.length))
result = iterator.next()
}
} else {
/*
val 是非可迭代对象
通过 Object.keys() 为对象上的每个 key 对应 value 通过循环调用 render 方法
得到 VNode 节点
*/
keys = Object.keys(val)
ret = new Array(keys.length)
for (i = 0, l = keys.length; i < l; i++) {
key = keys[i]
ret[i] = render(val[key], key, i)
}
}
}
/*
isDef(ret) --> ret !== undefined && ret !== null
！isDef(ret) --> ret === undefined || ret === null
*/
if (!isDef(ret)) {
ret = []
}
// 返回 VNode 数组
(ret: any)._isVList = true
return ret
}
target._m = renderStatic
文件位置：src\core\instance\render-helpers\render-list.js
/**
* Runtime helper for rendering static trees.
*
* 运行时负责生成静态树的 VNode 的帮助程序：
* 1、执行 staticRenderFns 数组中指定下标的渲染函数，
* 生成静态树的 VNode 并缓存，下次在渲染时从缓存中直接读取（isInFor 必须为 true）
* 2、为静态树的 VNode 打静态标记
*
* @param { number} index 表示当前静态节点的渲染函数在 staticRenderFns 数组中的下标索引
* @param { boolean} isInFor 表示当前静态节点是否被包裹在含有 v-for 指令的节点内部
*/
export function renderStatic (
index: number,
isInFor: boolean
): VNode | Array<VNode> {
// 缓存，静态节点第二次被渲染时就从缓存中直接获取已缓存的 VNode
const cached = this._staticTrees || (this._staticTrees = [])
let tree = cached[index]
/*
如果已渲染静态树且不在 v-for 内，就可以重复使用同一棵树。
*/
if (tree && !isInFor) {
return tree
}
/*
如果已渲染静态树且在 v-for 内，那么就需要重新渲染这个树
通过 staticRenderFns 数组，获取并执行对应的 静态渲染函数，
得到新的 VNode 节点，并缓存最新的结果
*/
tree = cached[index] = this.$options.staticRenderFns[index].call(
this._renderProxy,
null,
this // for render fns generated for functional component templates
)
/*
通过 markStatic 方法，标记静态节点，接收三个参数：
tree: VNode | Array<VNode>
key: string
isOnce: boolean
*/
markStatic(tree, `__static__${index}`, false)
return tree
}
vm._c = createElement()
文件位置：/src/core/instance/render.js
export function initRender (vm: Component) {
...
/*
将 createElement 方法绑定到此实例，方便在其中获得当前的渲染上下文
参数顺序：tag, data, children, normalizationType, alwaysNormalize
内部版本由从模板编译的渲染函数使用
*/
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
...
}
createElement() 方法
文件位置：src\core\vdom\create-element.js
/*
生成组件或普通标签的 vnode，一个包装函数
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> {
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
// 执行 _createElement 方法创建组件的 VNode
return _createElement(context, tag, data, children, normalizationType)
}
_createElement() 方法
文件位置：src\core\vdom\create-element.js
/**
* 生成 vnode，
* 1、平台保留标签和未知元素执行 new Vnode() 生成 vnode
* 2、组件执行 createComponent 生成 vnode
* 2.1 函数式组件执行自己的 render 函数生成 VNode
* 2.2 普通组件则实例化一个 VNode，并且在其 data.hook 对象上设置 4 个方法，
* 在组件的 patch 阶段会被调用，从而进入子组件的实例化、挂载阶段，直至完成渲染
* @param {*} context 上下文
* @param {*} tag 标签
* @param {*} data 属性 JSON 字符串
* @param {*} children 子节点数组
* @param {*} normalizationType 节点规范化类型
* @returns VNode or Array<VNode>
*/
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
)
// 如果属性是一个响应式对象，则返回一个空节点的 VNode
return createEmptyVNode()
}
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
/*
动态组件的 is 属性是一个假值时，tag 为 false，则返回一个空节点的 VNode
如：<component :is="false"></component>
in case of component :is set to falsy value
*/
return createEmptyVNode()
}
/*
检测唯一键 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
)
}
}
/*
子节点数组中只有一个函数时，将它当作默认插槽，然后清空子节点列表
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') {
/*
标签是字符串时，该标签有三种可能：
1、平台保留标签
2、自定义组件
3、不知名标签
*/
let Ctor
// 命名空间
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
/*
tag 是平台原生标签
platform built-in elements
*/
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn) && data.tag !== 'component') {
/*
v-on 指令的 .native 只在组件上生效，如：
<comp @click="outClick"></comp> --> 点击组件无法触发 outClick 方法
<comp @click.native="outClick"></comp> --> 点击组件可以触发 outClick 方法
*/
warn(
`The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
context
)
}
// 实例化一个 VNode
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
/*
tag 是一个自定义组件
- 在 this.$options.components 对象中找到指定标签名称的组件构造函数，
创建组件的 VNode
- 函数式组件直接执行其 render 函数生成 VNode，
- 普通组件则实例化一个 VNode，并且在其 data.hook 对象上设置了 4 个方法，
在组件的 patch 阶段会被调用
从而进入子组件的实例化、挂载阶段，直至完成渲染
component
*/
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// 不知名的一个标签，但也生成 VNode，因为考虑到在运行时可能会给一个合适的名字空间
// 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 {
/*
tag 为非字符串，比如可能是一个组件的配置对象或者是一个组件的构造函数
direct component options / constructor
*/
vnode = createComponent(tag, data, context, children)
}
// 返回组件的 VNode
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()
}
}
createComponent() 方法
文件位置：src\core\vdom\create-component.js
/**
* 创建组件的 VNode，
* 1、函数式组件通过执行其 render 方法生成组件的 VNode
* 2、普通组件通过 new VNode() 生成其 VNode，
* 但是普通组件有一个重要操作是在 data.hook 对象上设置了四个钩子函数，
* 分别是 init、prepatch、insert、destroy，在组件的 patch 阶段会被调用，
* 比如 init 方法，调用时会进入子组件实例的创建挂载阶段，直到完成渲染
* @param {*} Ctor 组件构造函数
* @param {*} data 属性组成的 JSON 字符串
* @param {*} context 上下文
* @param {*} children 子节点数组
* @param {*} tag 标签名
* @returns VNode or Array<VNode>
*/
export function createComponent (
Ctor: Class<Component> | Function | Object | void,
data: ?VNodeData,
context: Component,
children: ?Array<VNode>,
tag?: string
): VNode | Array<VNode> | void {
// 组件构造函数不存在，直接结束，Ctor === undefined || Ctor === null
if (isUndef(Ctor)) {
return
}
// Vue.extend
const baseCtor = context.$options._base
// plain options object: turn it into a constructor
// 当 Ctor 为配置对象时，通过 Vue.extend 将其转为构造函数
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}
// if at this stage it's not a constructor or an async component factory,
// reject.
// 如果到这个为止，Ctor 仍然不是一个函数，则表示这是一个无效的组件定义
if (typeof Ctor !== 'function') {
if (process.env.NODE_ENV !== 'production') {
warn(`Invalid Component definition: ${String(Ctor)}`, context)
}
return
}
// async component —— 异步组件
let asyncFactory
if (isUndef(Ctor.cid)) {
asyncFactory = Ctor
Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
if (Ctor === undefined) {
/*
为异步组件返回一个占位符节点，组件被渲染为注释节点，
但保留了节点的所有原始信息，这些信息将用于 异步服务器渲染 和 hydration
*/
return createAsyncPlaceholder(
asyncFactory,
data,
context,
children,
tag
)
}
}
// 节点的属性 JSON 字符串
data = data || {}
/*
这里其实就是组件做选项合并的地方，即编译器将组件编译为渲染函数，
渲染时执行 render 函数，然后执行其中的 _c，就会走到这里了
解析构造函数选项，并合基类选项，以防止在组件构造函数创建后应用全局混入
*/
resolveConstructorOptions(Ctor)
// transform component v-model data into props & events
// 将组件的 v-model 的信息（值和回调）转换为 data.attrs 对象的属性、值和 data.on 对象上的事件、回调
if (isDef(data.model)) {
transformModel(Ctor.options, data)
}
/*
extract props
提取 props 数据，得到 propsData 对象，propsData[key] = val
以组件 props 配置中的属性为 key，父组件中对应的数据为 value
*/
const propsData = extractPropsFromVNodeData(data, Ctor, tag)
// functional component —— 函数式组件
if (isTrue(Ctor.options.functional)) {
/**
执行函数式组件的 render 函数生成组件的 VNode ：
1、设置组件的 props 对象
2、设置函数式组件的渲染上下文，传递给函数式组件的 render 函数
3、调用函数式组件的 render 函数生成 vnode
*/
return createFunctionalComponent(Ctor, propsData, data, context, children)
}
// extract listeners, since these needs to be treated as
// child component listeners instead of DOM listeners
// 获取事件监听器对象 data.on，因为这些监听器需要作为子组件监听器处理，而不是 DOM 监听器
const listeners = data.on
// replace with listeners with .native modifier
// so it gets processed during parent component patch.
// 将带有 .native 修饰符的事件对象赋值给 data.on
data.on = data.nativeOn
if (isTrue(Ctor.options.abstract)) {
// 如果是抽象组件，则值保留 props、listeners 和 slot
// abstract components do not keep anything
// other than props & listeners & slot
// work around flow
const slot = data.slot
data = {}
if (slot) {
data.slot = slot
}
}
/**
在组件的 data 对象上设置 hook 对象，
hook 对象增加四个属性，init、prepatch、insert、destroy，
负责组件的创建、更新、销毁，这些方法在组件的 patch 阶段会被调用
install component management hooks onto the placeholder node
*/
installComponentHooks(data)
// return a placeholder vnode
const name = Ctor.options.name || tag
// 实例化组件的 VNode，对于普通组件的标签名会比较特殊，vue-component-${cid}-${name}
const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
// Weex specific: invoke recycle-list optimized @render function for
// extracting cell-slot template.
// https://github.com/Hanks10100/weex-native-directive/tree/master/component
/* istanbul ignore if */
if (__WEEX__ && isRecyclableComponent(vnode)) {
return renderRecyclableComponentTemplate(vnode)
}
return vnode
}
resolveConstructorOptions() 方法
文件位置：src\core\vdom\create-component.js
// 从构造函数上解析配置对象
export function resolveConstructorOptions (Ctor: Class<Component>) {
let options = Ctor.options
// 如果构造函数的 super 属性存在，证明还有基类，此时需要递归进行处理
if (Ctor.super) {
const superOptions = resolveConstructorOptions(Ctor.super)
// 缓存
const cachedSuperOptions = Ctor.superOptions
// 若缓存的配置和基类的配置不一致，说明配置已发生更改
if (superOptions !== cachedSuperOptions) {
// super option changed,
// need to resolve new options.
Ctor.superOptions = superOptions
// check if there are any late-modified/attached options (#4976)
// 获取发生变更的配置项
const modifiedOptions = resolveModifiedOptions(Ctor)
// update base extend options
if (modifiedOptions) {
// 将更改的配置项和 extent 选项进行合并
extend(Ctor.extendOptions, modifiedOptions)
}
// 将合并后得到的新配置赋值给 $options
options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
if (options.name) {
options.components[options.name] = Ctor
}
}
}
return options
}
resolveModifiedOptions() 方法
文件位置：/src/core/instance/init.js
/**
* 解析构造函数选项中后续被修改或者增加的选项
*/
function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
let modified
// 构造函数选项
const latest = Ctor.options
// 密封的构造函数选项，备份
const sealed = Ctor.sealedOptions
// 对比两个选项，记录不一致的选项
for (const key in latest) {
if (latest[key] !== sealed[key]) {
if (!modified) modified = {}
modified[key] = latest[key]
}
}
return modified
}
transformModel() 方法
文件位置：/src/core/vdom/create-component.js
/**
* 将组件的 v-model 的信息（值和回调）转换为 data.attrs 对象的属性、值和 data.on 对象上的事件、回调
* transform component v-model info (value and callback) into
* prop and event handler respectively.
*/
function transformModel (options, data: any) {
// model 的属性和事件，默认为 value 和 input
const prop = (options.model && options.model.prop) || 'value'
const event = (options.model && options.model.event) || 'input'
// 在 data.attrs 对象上存储 v-model 的值
;(data.attrs || (data.attrs = {}))[prop] = data.model.value
// 在 data.on 对象上存储 v-model 的事件
const on = data.on || (data.on = {})
// 已存在的事件回调函数
const existing = on[event]
// v-model 中事件对应的回调函数
const callback = data.model.callback
// 合并回调函数
if (isDef(existing)) {
if (
Array.isArray(existing)
? existing.indexOf(callback) === -1
: existing !== callback
) {
on[event] = [callback].concat(existing)
}
} else {
on[event] = callback
}
}
extractPropsFromVNodeData() 方法
文件位置：/src/core/vdom/helpers/extract-props.js
/**
* <comp msg="hello vue"></comp>
*
* 提取 props，得到 res[key] = val
* 以 props 配置中的属性为 key，父组件中对应的的数据为 value
*
* 当父组件中数据更新时，触发响应式更新，重新执行 render，生成新的 vnode，又走到这里
* 这样子组件中相应的数据就会被更新
*/
export function extractPropsFromVNodeData (
data: VNodeData,
Ctor: Class<Component>,
tag?: string
): ?Object {
// 组件的 props 选项，{ props: { msg: { type: String, default: xx } } }
// 这里只提取原始值，验证和默认值在子组件中处理
// we are only extracting raw values here.
// validation and default values are handled in the child
// component itself.
const propOptions = Ctor.options.props
// 没有定义 props 直接返回
if (isUndef(propOptions)) {
return
}
/*
以组件 props 配置中的属性为 key，父组件传递下来的值为 value
当父组件中数据更新时，触发响应式更新，重新执行 render，生成新的 vnode，又走到这里
这样子组件中相应的数据就会被更新
*/
const res = {}
const { attrs, props } = data
if (isDef(attrs) || isDef(props)) {
// 遍历 propsOptions
for (const key in propOptions) {
// 将小驼峰形式的 key 转换为 连字符 形式
const altKey = hyphenate(key)
/*
提示，如果声明的 props 为小驼峰形式（testProps），但由于 html 不区分大小写，
所以在 html 模版中应该使用 test-props 代替 testProps
*/
if (process.env.NODE_ENV !== 'production') {
const keyInLowerCase = key.toLowerCase()
if (
key !== keyInLowerCase &&
attrs && hasOwn(attrs, keyInLowerCase)
) {
tip(
`Prop "${keyInLowerCase}" is passed to component ` +
`${formatComponentName(tag || Ctor)}, but the declared prop name is` +
` "${key}". ` +
`Note that HTML attributes are case-insensitive and camelCased ` +
`props need to use their kebab-case equivalents when using in-DOM ` +
`templates. You should probably use "${altKey}" instead of "${key}".`
)
}
}
checkProp(res, props, key, altKey, true) ||
checkProp(res, attrs, key, altKey, false)
}
}
return res
}
checkProp() 方法
文件位置：/src/core/vdom/helpers/extract-props.js
// 得到 res[key] = val
function checkProp (
res: Object,
hash: ?Object,
key: string,
altKey: string,
preserve: boolean
): boolean {
if (isDef(hash)) {
/*
判断 hash（props/attrs）对象中是否存在 key 或 altKey
存在则设置给 res => res[key] = hash[key]
*/
if (hasOwn(hash, key)) {
res[key] = hash[key]
if (!preserve) {
delete hash[key]
}
return true
} else if (hasOwn(hash, altKey)) {
res[key] = hash[altKey]
if (!preserve) {
delete hash[altKey]
}
return true
}
}
return false
}
createFunctionalComponent() 方法
文件位置：/src/core/vdom/create-functional-component.js
/**
* 执行函数式组件的 render 函数生成组件的 VNode ：
* 1、设置组件的 props 对象
* 2、设置函数式组件的渲染上下文，传递给函数式组件的 render 函数
* 3、调用函数式组件的 render 函数生成 vnode
*
* @param {*} Ctor 组件的构造函数
* @param {*} propsData 额外的 props 对象
* @param {*} data 节点属性组成的 JSON 字符串
* @param {*} contextVm 上下文
* @param {*} children 子节点数组
* @returns Vnode or Array<VNode>
*/
export function createFunctionalComponent (
Ctor: Class<Component>,
propsData: ?Object,
data: VNodeData,
contextVm: Component,
children: ?Array<VNode>
): VNode | Array<VNode> | void {
// 组件配置项
const options = Ctor.options
// 获取 props 对象
const props = {}
// 组件本身的 props 选项
const propOptions = options.props
// 设置函数式组件的 props 对象
if (isDef(propOptions)) {
/*
说明该函数式组件本身提供了 props 选项，
则将 props.key 的值设置为组件上传递下来的对应 key 的值
*/
for (const key in propOptions) {
props[key] = validateProp(key, propOptions, propsData || emptyObject)
}
} else {
// 当前函数式组件没有提供 props 选项，则将组件上的 attribute 自动解析为 props
if (isDef(data.attrs)) mergeProps(props, data.attrs)
if (isDef(data.props)) mergeProps(props, data.props)
}
// 实例化函数式组件的渲染上下文
const renderContext = new FunctionalRenderContext(
data,
props,
children,
contextVm,
Ctor
)
// 调用 render 函数，生成 vnode，并给 render 函数传递 _c 和 渲染上下文
const vnode = options.render.call(null, renderContext._c, renderContext)
// 在最后生成的 VNode 对象上加一些标记，表示该 VNode 是一个函数式组件生成的，最后返回 VNode
if (vnode instanceof VNode) {
return cloneAndMarkFunctionalResult(vnode, data, renderContext.parent, options, renderContext)
} else if (Array.isArray(vnode)) {
const vnodes = normalizeChildren(vnode) || []
const res = new Array(vnodes.length)
for (let i = 0; i < vnodes.length; i++) {
res[i] = cloneAndMarkFunctionalResult(vnodes[i], data, renderContext.parent, options, renderContext)
}
return res
}
}
installComponentHooks() 方法
文件位置：/src/core/vdom/create-component.js
const hooksToMerge = Object.keys(componentVNodeHooks)
/**
* 在组件的 data 对象上设置 hook 对象，
* hook 对象增加四个属性，init、prepatch、insert、destroy，
* 负责组件的创建、更新、销毁
*/
function installComponentHooks (data: VNodeData) {
const hooks = data.hook || (data.hook = {})
// 遍历 hooksToMerge 数组，hooksToMerge = ['init', 'prepatch', 'insert' 'destroy']
for (let i = 0; i < hooksToMerge.length; i++) {
// 比如 key = init
const key = hooksToMerge[i]
// 从 data.hook 对象中获取 key 对应的方法
const existing = hooks[key]
// componentVNodeHooks 对象中 key 对象的方法
const toMerge = componentVNodeHooks[key]
// 合并用户传递的 hook 方法和框架自带的 hook 方法，其实就是分别执行两个方法
if (existing !== toMerge && !(existing && existing._merged)) {
hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
}
}
}
componentVNodeHooks 对象
文件位置：/src/core/vdom/create-component.js
/*
patch 期间在组件 vnode 上调用内联钩子
inline hooks to be invoked on component VNodes during patch
*/
const componentVNodeHooks = {
// 初始化
init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
if (
vnode.componentInstance &&
!vnode.componentInstance._isDestroyed &&
vnode.data.keepAlive
) {
/*
被 keep-alive 包裹的组件
kept-alive components, treat as a patch
*/
const mountedNode: any = vnode // work around flow
componentVNodeHooks.prepatch(mountedNode, mountedNode)
} else {
// 创建组件实例，即 new vnode.componentOptions.Ctor(options) => 得到 Vue 组件实例
const child = vnode.componentInstance = createComponentInstanceForVnode(
vnode,
activeInstance
)
/*
执行组件的 $mount 方法，进入挂载阶段，接下来就是通过编译器得到 render 函数，
接着走 挂载、patch 流程，直到组件渲染到页面
*/
child.$mount(hydrating ? vnode.elm : undefined, hydrating)
}
},
// 更新 VNode，用新的 VNode 配置更新旧的 VNode 上的各种属性
prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
// 新 VNode 的组件配置项
const options = vnode.componentOptions
// 旧 VNode 的组件配置项
const child = vnode.componentInstance = oldVnode.componentInstance
// 用 vnode 上的属性更新 child 上的各种属性
updateChildComponent(
child,
options.propsData, // updated props
options.listeners, // updated listeners
vnode, // new parent vnode
options.children // new children
)
},
// 执行组件的 mounted 声明周期钩子
insert (vnode: MountedComponentVNode) {
const { context, componentInstance } = vnode
// 如果组件未挂载，则调用 mounted 声明周期钩子
if (!componentInstance._isMounted) {
componentInstance._isMounted = true
callHook(componentInstance, 'mounted')
}
// 处理 keep-alive 组件的异常情况
if (vnode.data.keepAlive) {
if (context._isMounted) {
// vue-router#1212
// During updates, a kept-alive component's child components may
// change, so directly walking the tree here may call activated hooks
// on incorrect children. Instead we push them into a queue which will
// be processed after the whole patch process ended.
queueActivatedComponent(componentInstance)
} else {
activateChildComponent(componentInstance, true /* direct */)
}
}
},
/*
销毁组件
1、如果组件被 keep-alive 组件包裹，则使组件失活，不销毁组件实例，从而缓存组件的状态
2、如果组件没有被 keep-alive 包裹，则直接调用实例的 $destroy 方法销毁组件
*/
destroy (vnode: MountedComponentVNode) {
// 从 vnode 上获取组件实例
const { componentInstance } = vnode
// 如果组件实例没有被销毁
if (!componentInstance._isDestroyed) {
// 组件没有被 keep-alive 组件包裹，则直接调用 $destroy 方法销毁组件
if (!vnode.data.keepAlive) {
componentInstance.$destroy()
} else {
// 组件被 keep-alive 组件包裹，负责让组件失活，不销毁组件实例，从而缓存组件的状态
deactivateChildComponent(componentInstance, true /* direct */)
}
}
}
}
createComponentInstanceForVnode 对象
文件位置：/src/core/vdom/create-component.js
/*
new vnode.componentOptions.Ctor(options) => 得到 Vue 组件实例
*/
export function createComponentInstanceForVnode (
// flow 不知道它是 MountedComponentVNode
vnode: any,
// 处于生命周期状态的 activeInstance
parent: any
): Component {
const options: InternalComponentOptions = {
_isComponent: true,
_parentVnode: vnode,
parent
}
// 检查内联模版渲染函数
const inlineTemplate = vnode.data.inlineTemplate
if (isDef(inlineTemplate)) {
options.render = inlineTemplate.render
options.staticRenderFns = inlineTemplate.staticRenderFns
}
return new vnode.componentOptions.Ctor(options)
}
总结
组件是如何变成 VNode？
- 组件实例
init初始化，最后执行$mount进入挂载阶段 - 如果是只包含 运行时 的
vue.js，只直接进入挂载阶段，因为此时组件已经变成了渲染函数；编译过程 通过模块打包器 + vue-loader + vue-template-compiler完成的 - 如果没有使用 预编译，则必须使用全量的
vue.js - 挂载时如果发现组件配置项上没有
render选项，则进入 编译阶段 - 将模版字符串编译成
AST语法树 —— 普通的JS对象 - 然后优化
AST，遍历AST对象，标记每一个节点是否为 静态节点；然后再进一步标记出 静态根节点，在组件后续更新时会跳过这些静态节点的更新，以提高性能 - 接下来从
AST生成 渲染函数 ：- 负责生成动态节点
VNode的render函数 staticRenderFns数组，其中每个元素都是一个生成静态节点VNode的函数，这些函数会作为render函数的组成部分，负责生成静态节点的VNode
- 负责生成动态节点
- 接下来将渲染函数放到组件的配置对象上，进入 挂载阶段，即执行
mountComponent方法 - 最终负责渲染组件和更新组件的是一个叫
updateComponent方法，该方法每次执行前首先需要执行vm._render函数，该函数负责执行编译器生成的render，得到组件的VNode - 将组件生成
VNode的具体工作是由render函数中的_c、_o、_l、_m等方法完成的，这些方法都被挂载到Vue实例上，负责在运行时生成组件VNode - 设置组件配置信息，然后通过
new VNode(组件信息)生成组件的VNode
render helper 的作用就是：在
Vue实例上挂载一些运行时的工具方法，这些方法用在编译器生成的渲染函数中，用于生成组件的VNode
props 响应式的原理是什么？
- 在处理组件的
props时，会提取组件的props数据，以组件的props配置中的属性为key，父组件中对应的数据为value生成一个propsData对象 - 当组件更新时生成新的
VNode，又会进行上一步，得到更新后的propsData对象