关于前端:render-函数是怎么来的深入浅出-Vue-中的模板编译

new Vue({render: h => h(App)
})

这个大家都相熟，调用 render 就会失去传入的模板 (.vue 文件)对应的虚构 DOM，那么这个 render 是哪来的呢？它是怎么把 .vue 文件转成浏览器可辨认的代码的呢？

render 函数是怎么来的有两种形式

第一种就是通过模板编译生成 render 函数
第二种是咱们本人在组件里定义了 render 函数，这种会跳过模板编译的过程

本文将为大家别离介绍这两种，以及具体的编译过程原理

咱们晓得 <template></template> 这个是模板，不是实在的 HTML，浏览器是不意识模板的，所以咱们须要把它编译成浏览器意识的原生的 HTML

这一块的次要流程就是

提取出模板中的原生 HTML 和非原生 HTML，比方绑定的属性、事件、指令等等
通过一些解决生成 render 函数
render 函数再将模板内容生成对应的 vnode
再通过 patch 过程 (Diff) 失去要渲染到视图中的 vnode
最初依据 vnode 创立实在的 DOM 节点，也就是原生 HTML 插入到视图中，实现渲染

下面的 1、2、3 条就是模板编译的过程了

那它是怎么编译，最终生成 render 函数的呢？

这就是模板编译的入口函数，它接管两个参数

template：就是要转换的模板字符串
options：就是转换时须要的参数

编译的流程，次要有三步：

模板解析：通过正则等形式提取出 <template></template> 模板里的标签元素、属性、变量等信息，并解析成形象语法树 AST
优化：遍历 AST 找出其中的动态节点和动态根节点，并增加标记
代码生成：依据 AST 生成渲染函数 render

这三步别离对应三个函数，前面会一一下介绍，先看一下 baseCompile 源码中是在哪里调用的

源码地址：src/complier/index.js - 11 行

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string, // 就是要转换的模板字符串
  options: CompilerOptions // 就是转换时须要的参数
): CompiledResult {
  // 1. 进行模板解析，并将后果保留为 AST
  const ast = parse(template.trim(), options)
  
  // 没有禁用动态优化的话
  if (options.optimize !== false) {
    // 2. 就遍历 AST，并找出动态节点并标记
    optimize(ast, options)
  }
  // 3. 生成渲染函数
  const code = generate(ast, options)
  return {
    ast,
    render: code.render, // 返回渲染函数 render
    staticRenderFns: code.staticRenderFns
  }
})

就这么几行代码，三步，调用了三个办法很清晰

咱们先看一下最初 return 进来的是个啥，再来深刻下面这三步别离调用的办法源码，也好更分明的晓得这三步别离是要做哪些解决

比方有这样的模板

<template>
    <div id="app">{{name}}</div>
</template>

打印一下编译后的后果，也就是下面源码 return 进来的后果，看看是啥

{
  ast: {
    type: 1,
    tag: 'div',
    attrsList: [{ name: 'id', value: 'app'} ],
    attrsMap: {id: 'app'},
    rawAttrsMap: {},
    parent: undefined,
    children: [
      {
        type: 2,
        expression: '_s(name)',
        tokens: [{ '@binding': 'name'} ],
        text: '{{name}}',
        static: false
      }
    ],
    plain: false,
    attrs: [{ name: 'id', value: '"app"', dynamic: undefined} ],
    static: false,
    staticRoot: false
  },
  render: `with(this){return _c('div',{attrs:{"id":"app"}},[_v(_s(name))])}`,
  staticRenderFns: [],
  errors: [],
  tips: []}

看不明确也没有关系，留神看下面提到的三步都干了啥

ast 字段，就是第一步生成的
static 字段，就是标记，是在第二步中依据 ast 里的 type 加上去的
render 字段，就是第三步生成的

有个大略的印象了，而后再来看源码

源码地址：src/complier/parser/index.js - 79 行

就是这个办法就是解析器的主函数，就是它通过正则等办法提取出 <template></template> 模板字符串里所有的 tag、props、children 信息，生成一个对应构造的 ast 对象

parse 接管两个参数

template：就是要转换的模板字符串
options：就是转换时须要的参数。它蕴含有四个钩子函数，就是用来把 parseHTML 解析进去的字符串提取进去，并生成对应的 AST

外围步骤是这样的：

调用 parseHTML 函数对模板字符串进行解析

解析到开始标签、完结标签、文本、正文别离进行不同的解决
解析过程中遇到文本信息就调用文本解析器 parseText 函数进行文本解析
解析过程中遇到蕴含过滤器，就调用过滤器解析器 parseFilters 函数进行解析

每一步解析的后果都合并到一个对象上(就是最初的 AST)

这个中央的源码切实是太长了，有大几百行代码，我就只贴个大略吧，有趣味的本人去看一下

export function parse (
  template: string, // 要转换的模板字符串
  options: CompilerOptions // 转换时须要的参数
): ASTElement | void {
  parseHTML(template, {
    warn,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
    shouldKeepComment: options.comments,
    outputSourceRange: options.outputSourceRange,
    // 解析到开始标签时调用，如 <div>
    start (tag, attrs, unary, start, end) {
        // unary 是否是自闭合标签，如 <img />
        ...
    },
    // 解析到完结标签时调用，如 </div>
    end (tag, start, end) {...},
    // 解析到文本时调用
    chars (text: string, start: number, end: number) {
      // 这里会判断判断很多货色，来看它是不是带变量的动静文本
      // 而后创立动静文本或动态文本对应的 AST 节点
      ...
    },
    // 解析到正文时调用
    comment (text: string, start, end) {
      // 正文是这么找的
      const comment = /^<!\--/
      if (comment.test(html)) {
      // 如果是正文，就持续找 '-->'
      const commentEnd = html.indexOf('-->')
      ...
    }
  })
  // 返回的这个就是 AST
  return root
}

下面解析文本时调用的 chars() 会依据不同类型节点加上不同 type，来标记 AST 节点类型，这个属性在下一步标记的时候会用到

type	AST 节点类型
1	元素节点
2	蕴含变量的动静文本节点
3	没有变量的纯文本节点

这个函数就是在 AST 里找出动态节点和动态根节点，并增加标记，为了前面 patch 过程中就会跳过动态节点的比照，间接克隆一份过来，从而优化了 patch 的性能

函数外面调用的内部函数就不贴代码了，大抵过程是这样的

标记动态节点(markStatic)。就是判断 type，下面介绍了值为 1、2、3 的三种类型
- type 值为 1：就是蕴含子元素的节点，设置 static 为 false 并递归标记子节点，直到标记完所有子节点
- type 值为 2：设置 static 为 false
- type 值为 3：就是不蕴含子节点和动静属性的纯文本节点，把它的 static = true，patch 的时候就会跳过这个，间接克隆一份去
标记动态根节点(markStaticRoots)，这里的原理和标记动态节点基本相同，只是须要满足上面条件的节点能力算作是动态根节点
- 节点自身必须是动态节点
- 必须有子节点
- 子节点不能只有一个文本节点

源码地址：src/complier/optimizer.js - 21 行

export function optimize (root: ?ASTElement, options: CompilerOptions) {if (!root) return
  isStaticKey = genStaticKeysCached(options.staticKeys || '')
  isPlatformReservedTag = options.isReservedTag || no
  // 标记动态节点
  markStatic(root)
  // 标记动态根节点
  markStaticRoots(root, false)
}

这个就是生成 render 的函数，就是说最终会返回上面这样的货色

// 比方有这么个模板
<template>
    <div id="app">{{name}}</div>
</template>

// 下面模板编译后返回的 render 字段 就是这样的
render: `with(this){return _c('div',{attrs:{"id":"app"}},[_v(_s(name))])}`

// 把内容格式化一下，容易了解一点
with(this){
  return _c(
    'div',
    {attrs:{"id":"app"} },
    [_v(_s(name))  ]
  )
}

这个构造是不是有点相熟？

理解虚构 DOM 就可以看进去，下面的 render 正是虚构 DOM 的构造，就是把一个标签分为 tag、props、children，没有错

在看 generate 源码之前，咱们要先理解一下下面这最初返回的 render 字段是什么意思，再来看 generate 源码，就会轻松得多，不然连函数返回的货色是干嘛的都不晓得怎么可能看得懂这个函数呢

咱们来翻译一下下面编译进去的 render

这个 with 在《你不晓得的 JavaScript》上卷里介绍的是，用来坑骗词法作用域的关键字，它能够让咱们更快的援用一个对象上的多个属性

看个例子

const name = '掘金'
const obj = {name:'沐华', age: 18}
with(obj){console.log(name) // 沐华  不须要写 obj.name 了
    console.log(age) // 18   不须要写 obj.age 了
}

下面的 with(this){} 里的 this 就是以后组件实例。因为通过 with 扭转了词法作用域中属性的指向，所以标签里应用 name 间接用就是了，而不须要 this.name 这样

那 _c、_v 和 _s 是什么呢？

在源码里是这样定义的，格局是：_c(缩写) = createElement(函数名)

源码地址：src/core/instance/render-helpers/index.js - 15 行

// 其实不止这几个，因为本文例子中没有用到就没都复制过去占位了
export function installRenderHelpers (target: any) {
  target._s = toString // 转字符串函数
  target._l = renderList // 生成列表函数
  target._v = createTextVNode // 创立文本节点函数
  target._e = createEmptyVNode // 创立空节点函数
}
// 补充
_c = createElement // 创立虚构节点函数

再来看是不是就分明多了呢

with(this){ // 坑骗词法作用域，将该作用域里所有属姓和办法都指向以后组件
  return _c( // 创立一个虚构节点
    'div', // 标签为 div
    {attrs:{"id":"app"} }, // 有一个属性 id 为 'app'
    [_v(_s(name))  ] // 是一个文本节点，所以把获取到的动静属性 name 转成字符串
  )
}

接下来咱们再来看 generate() 源码

源码地址：src/complier/codegen/index.js - 43 行

这个流程很简略，只有几行代码，就是先判断 AST 是不是为空，不为空就依据 AST 创立 vnode，否则就创立一个空 div 的 vnode

export function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): CodegenResult {const state = new CodegenState(options)
  // 就是先判断 AST 是不是为空，不为空就依据 AST 创立 vnode，否则就创立一个空 div 的 vnode
  const code = ast ? (ast.tag === 'script' ? 'null' : genElement(ast, state)) : '_c("div")'
  
  return {render: `with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}

能够看出这外面次要就是通过 genElement() 办法来创立 vnode 的，所以咱们来看一下它的源码，看是怎么创立的

源码地址：src/complier/codegen/index.js - 56 行

这里的逻辑还是很清晰的，就是一堆 if/else 判断传进来的 AST 元素节点的属性来执行不同的生成函数

这里还能够发现另一个知识点 v-for 的优先级要高于 v-if，因为先判断 for 的

export function genElement (el: ASTElement, state: CodegenState): string {if (el.parent) {el.pre = el.pre || el.parent.pre}

  if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) { // v-once
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) { // v-for
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) { // v-if
    return genIf(el, state)
     
    // template 节点 && 没有插槽 && 没有 pre 标签
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') { // v-slot
    return genSlot(el, state)
  } else {
    // component or element
    let code
    // 如果有子组件
    if (el.component) {code = genComponent(el.component, el, state)
    } else {
      let data
      // 获取元素属性 props
      if (!el.plain || (el.pre && state.maybeComponent(el))) {data = genData(el, state)
      }
      // 获取元素子节点
      const children = el.inlineTemplate ? null : genChildren(el, state, true)
      code = `_c('${el.tag}'${data ? `,${data}` : '' // data
      }${children ? `,${children}` : '' // children
      })`
    }
    // module transforms
    for (let i = 0; i < state.transforms.length; i++) {code = state.transforms[i](el, code)
    }
    // 返回下面作为 with 作用域执行的内容
    return code
  }
}

每一种类型调用的生成函数就不一一列举了，总的来说最初创立进去的 vnode 节点类型无非就三种，元素节点、文本节点、正文节点

先举个例子吧，三种状况如下

// 1. test.vue
<template>
    <h1> 我是沐华 </h1>
</template>
<script>
  export default {}
</script>

// 2. test.vue
<script>
  export default {render(h){return h('h1',{},'我是沐华')
    }
  }
</script>

// 3. test.js
export default {render(h){return h('h1',{},'我是沐华')
  }
}

下面三种，最初渲染的进去的就是齐全截然不同的，因为这个 h 就是下面模板编译后的那个 _c

这时有人可能就会问，为什么要本人写呢，不是有模板编译主动生成吗？

这个问题问得好！本人写必定是有益处的

本人把 vnode 给写了，就会间接跳过了模板编译，不必去解析模板里的动静属性、事件、指令等等了，所以性能上会有那么一丢丢晋升。这一点在上面的渲染的优先级上就有体现
还有一些状况，能让咱们代码写法的更加灵便，更加不便简洁，不会冗余

比方 Element-UI 外面的组件源码里就有大量间接写 render 函数

接下来别离看下这两点是如何体现的

先看一下在官网的生命周期里，对于模板编译的局部

如图能够晓得，如果有 template，就不会管 el 了，所以 template 比 el 的优先级更高，比方

那咱们本人写了 render 呢？

<div id='app'>
    <p>{{name}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{name:'沐华'},
        template:'<div> 掘金 </div>',
        render(h){return h('div', {}, '好好学习，天天向上')
        }
    })
</script>

这个代码执行后页面渲染进去只有 <div> 好好学习，天天向上 </div>

能够得出 render 函数的优先级更高

因为不论是 el 挂载的，还是 emplate 最初都会被编译成 render 函数，而如果曾经有了 render 函数了，就跳过后面的编译了

这一点在源码里也有体现

在源码中找到答案：dist/vue.js - 11927 行

  Vue.prototype.$mount = function (el, hydrating) {el = el && query(el);
    var options = this.$options;
    // 如果没有 render 
    if (!options.render) {
      var template = options.template;
      // 再判断，如果有 template
      if (template) {if (typeof template === 'string') {if (template.charAt(0) === '#') {template = idToTemplate(template);
          }
        } else if (template.nodeType) {template = template.innerHTML;} else {return this}
      // 再判断，如果有 el
      } else if (el) {template = getOuterHTML(el);
      }
    }
    return mount.call(this, el, hydrating)
  };

比如说咱们须要写很多 if 判断的时候

<template>
    <h1 v-if="level === 1">
      <a href="xxx">
        <slot></slot>
      </a>
    </h1>
    <h2 v-else-if="level === 2">
      <a href="xxx">
        <slot></slot>
      </a>
    </h2>
    <h3 v-else-if="level === 3">
      <a href="xxx">
        <slot></slot>
      </a>
    </h3>
</template>
<script>
  export default {props:['level']
  }
</script>

不晓得你有没有写过相似下面这样的代码呢？

咱们换一种形式来写出和下面截然不同的代码看看，间接写 render

<script>
  export default {props:['level'],
    render(h){return h('h' + this.level, this.$slots.default())
    }
  }
</script>

搞定！就这！就这？

没错，就这！

或者上面这样，屡次调用的时候就很不便

<script>
  export default {props:['level'],
    render(h){
      const tag = 'h' + this.level
      return (<tag>{this.$slots.default()}</tag>)
    }
  }
</script>

如果想晓得更多格局的模板编译进去是什么样的，能够这样

Vue2 的模板编译能够装置 vue-template-compiler

Vue3 的模板编译能够点这里

而后自行测试

另外在 Vue3 里模板编译局部有一些批改，能够点击上面链接，看下深入浅出虚构 DOM 和 Diff 算法，外面有介绍

深入浅出虚构 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
Vue3 的 7 种和 Vue2 的 12 种组件通信，值得珍藏
最新的 Vue3.2 都更新了些什么理解一下
JavaScript 进阶知识点
前端异样监控和容灾
20 分钟助你拿下 HTTP 和 HTTPS，坚固你的 HTTP 常识体系

如果本文对你有一丁点帮忙，点个赞反对一下吧，感激感激

关于前端:render-函数是怎么来的深入浅出-Vue-中的模板编译

意识模板编译

模板编译详解——源码

baseCompile()

编译后果

1. parse()

2. optimize()

3. generate()

render

generate

genElement()

自定义的 render

1. 渲染优先级

2. 更灵便的写法

补充

往期精彩

结语

Just My Socks（注册教程内含优惠码）

关于前端:render-函数是怎么来的深入浅出-Vue-中的模板编译

意识模板编译

模板编译详解——源码

baseCompile()

编译后果

1. parse()

2. optimize()

3. generate()

render

generate

genElement()

自定义的 render

1. 渲染优先级

2. 更灵便的写法

补充

往期精彩

结语

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）