什么?编译后的代码你竟然看不懂,不知道_v,_s是什么?本篇文章让我们逐个解释这些辅助函数的作用!
[_vm._v(\\\" \\\" + _vm._s(_vm.obj.a) + \\\" \\\" + _vm._s(_vm.obj.a) + \\\" \\\")]
vue-template-compiler是编译vue模板的包,传入模板返回AST抽象语法树。
const compiler = require('vue-template-compiler')
const val = compiler.compile('<span class="active" :total="count">666</span>')
输出结果如下:
const res = {
ast: {
type: 1,
tag: 'span',
attrsList: [ { name: 'total', value: 'count' } ],
attrsMap: { class: 'active', ':total': 'count' },
rawAttrsMap: {},
parent: undefined,
children: [ { type: 3, text: 666, static: true } ],
plain: false,
staticClass: '"active"',
hasBindings: true,
attrs: [ { name: 'total', value: 'count', dynamic: false } ],
static: false,
staticRoot: false
},
render: `with(this){return _c('span',{staticClass:"active",attrs:{"total":count}},[_v("666")])}`,
staticRenderFns: [],
errors: [],
tips: []
}
可以看到对象中有 AST 属性和 render 函数,其实 AST 是为了生成 render 函数用的,编译的最后一步就是把优化后的 AST 树转换成可执行的代码。
with (this) {
return _c(
'span',
{ staticClass: "active", attrs: { "total": count } },
[_v("666")]
)
}
Vue中 _c
函数定义在 src/core/instance/render.js 中。
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
顾名思义,_c
就是执行 createElement 去创建 VNode。
而 _l
、_v
等定义在 src/core/instance/render-helpers/index.js 中:
export function installRenderHelpers (target: any) {
target._o = markOnce
target._n = toNumber
target._s = toString
target._l = renderList
target._t = renderSlot
target._q = looseEqual
target._i = looseIndexOf
target._m = renderStatic
target._f = resolveFilter
target._k = checkKeyCodes
target._b = bindObjectProps
target._v = createTextVNode
target._e = createEmptyVNode
target._u = resolveScopedSlots
target._g = bindObjectListeners
}
在 Vue.js 源码中的一个函数 installRenderHelpers
,用于向目标对象(target
)添加一系列渲染辅助函数。这些辅助函数在 Vue.js 的渲染过程中起着重要的作用,用于处理模板中的各种指令、表达式和特定的渲染逻辑。
让我们逐个解释这些辅助函数的作用:
1.target._o = markOnce
: markOnce
用于标记一个节点只渲染一次,防止重复渲染。2.target._n = toNumber
: toNumber
用于将一个值转换为数字类型。3.target._s = toString
: toString
用于将一个值转换为字符串类型。4.target._l = renderList
: renderList
用于渲染一个数组或对象的列表。5.target._t = renderSlot
: renderSlot
用于渲染插槽内容。6.target._q = looseEqual
: looseEqual
用于宽松相等比较两个值。7.target._i = looseIndexOf
: looseIndexOf
用于宽松相等比较并返回值在数组中的索引。8.target._m = renderStatic
: renderStatic
用于渲染静态内容。9.target._f = resolveFilter
: resolveFilter
用于解析过滤器。10.target._k = checkKeyCodes
: checkKeyCodes
用于检查按键码。11.target._b = bindObjectProps
: bindObjectProps
用于绑定对象属性。12.target._v = createTextVNode
: createTextVNode
用于创建文本节点。13.target._e = createEmptyVNode
: createEmptyVNode
用于创建空节点。14.target._u = resolveScopedSlots
: resolveScopedSlots
用于解析作用域插槽。15.target._g = bindObjectListeners
: bindObjectListeners
用于绑定对象监听器。
这些辅助函数在 Vue.js 的渲染过程中发挥着重要作用,帮助处理模板中的各种渲染需求和逻辑。通过这些函数,Vue.js 能够实现模板的动态渲染、数据绑定、插槽处理和其他视图相关的功能。这些函数的存在使得 Vue.js 具有强大的渲染能力和灵活性,让开发者能够更轻松地构建交互丰富的前端应用。