什么?编译后的代码你竟然看不懂,不知道_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('666')
输出结果如下
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 具有强大的渲染能力和灵活性,让开发者能够更轻松地构建交互丰富的前端应用。