Vue渲染函数 render & JSX 模板编译_vue jsx 编译

 Vue 的模板编译是在 $mount 的过程中进行的，在 $mount 的时候执行了 compile 这个方法来将 template 里的内容转换成 render 函数，等待调用。

compile包含了三大步骤：

• parse 函数解析 template

parse 函数里定义了许多的正则表达式，通过对标签名开头、标签名结尾、属性字段、文本内容等等的递归匹配。把字符串类型的 template 转化成了树状结构的 AST（抽象语法树）。

• optimize 函数优化静态内容

1、标记所有的静态和非静态结点

2、标记静态根节点

对 parse 生成的 AST 进行静态内容的优化。静态内容指的是和数据没有关系，不需要每次都刷新的内容。标记静态节点的作用是为了在后面做 Vnode 的 diff 时起作用，用来确认一个节点是否应该做 patch 还是直接跳过。

• generate 函数创建 render 函数字符串

通过generate 函数，递归AST，为每个AST节点生成render函数

 

模板编译成render函数之后，那么接下来 Vue 做的事情就是 new watcher，这个时候会对绑定的数据执行监听，render 函数就是数据监听的回调所调用的，其结果便是重新生成 vnode。当这个 render 函数字符串在第一次 mount、或者绑定的数据更新的时候，都会被调用，生成 Vnode。

如果是数据的更新，那么 Vnode 会与数据改变之前的 Vnode 做 diff，对内容做改动之后，就会更新到我们真正的 DOM 上。

===================================================================================

在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器 。

Vue 的模板实际上被编译成了渲染函数。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

createElement 

返回不是一个实际的 DOM 元素，而是 “虚拟节点 (virtual node)”，简写它为“VNode”。

“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。 

return createElement('h1', this.blogTitle)

createElement（a,b,c）

a：{String | Object | Function}  一个 HTML 标签名、组件选项对象，或者 函数

b：{Object} 一个与模板中 attribute 对应的数据对象。可选

c：{String | Array} 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成

createElement（‘div’,{} , [ createElement('span','哈哈哈哈') ] ）

 

https://juejin.cn/post/6844903576343412743