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