Vue 辅助函数的作用

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