VueJS 的模板引擎

[coconilu]

概述

VueJS作为一个前端框架，少不了模板引擎的功能，为了优化模板引擎，Vue会在编译阶段把template转化为render函数，在编译阶段之前（预编译阶段）我们可以定制一些模板引擎的行为，比如文本插入分隔符、指令、过滤器

模板引擎

通过Vue的官方文档，我们知道Vue提供的模板引擎的语法有：

1. 插值
   1.1. HTML标签的文本内容
   1.2. HTML标签的纯HTML内容
   1.3. HTML标签的属性内容
2. 指令
   2.1. 内置的指令有：v-if、v-for、v-bind、v-on
   2.2. 指令可以带上修饰符
3. 过滤器

Vue给了我们很大的灵活性，比如我们可以定义文本插入分隔符、指令、过滤器

1. 文本插入分隔符

定义文本插入分隔符很简单，只需要在实例化Vue的时候，在options.delimiters设置自定义的分隔符就行了：

new Vue({
  delimiters: ['${', '}']
})

2. 指令

自定义指令的方式如下：

directives: {
  focus: {
    // 指令的定义---
  }
}

Vue为指令定义函数提供了几个钩子函数：

1. bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
2. inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
3. update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
5. unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数的参数：

1. el: 指令所绑定的元素，可以用来直接操作 DOM 。
2. binding: 一个对象，包含以下属性：
   2.1. name: 指令名，不包括 v- 前缀。
   2.2. value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
   2.3. oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
   2.4. expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
   2.5. arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
   2.6. modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
3. vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
4. oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3. 过滤器

过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

自定义过滤器的一个案例：

new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

可以看出，过滤器函数的第一个参数是“管道符"前面的数值，并返回经过处理的数值，可以作为下一个过滤器的入参。

模板引擎执行时机

通过render函数生成的vnode，会带有跟模板引擎执行相关的配置，比如directives等。

所以在挂载阶段执行patch函数的时候，会把vnode转换为真实DOM，这时模板引擎将会读取相关配置并执行。

参考

自定义指令
过滤器