Vue 指令的本质

作者：Seiya

时间：2019年08月26日

vue 指令

vue 指令本质上就是一种语法糖，更直白的可以称为标志位。vue 在编译阶段，从 template 编译成 render 函数的时候，会把指令编译成 JavaScript 代码。这也是 render 函数和 JSX 不支持指令的原因。

内置指令

v-text：更新元素的 textContent；
v-html：更新元素的 innerHTML；
v-show：根据表达式之真假值，切换元素的 display CSS 属性；
v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建；
v-else：前一兄弟元素必须有 v-if 或 v-else-if；
v-else-if：前一兄弟元素必须有 v-if 或 v-else-if；
v-for：基于源数据多次渲染元素或模板块；
v-on：绑定事件监听器。事件类型由参数指定；
v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式；
v-model：在表单控件或者组件上创建双向绑定；
v-slot：提供具名插槽或需要接收 prop 的插槽；
v-pre：跳过这个元素和它的子元素的编译过程；
v-cloak：这个指令保持在元素上直到关联实例结束编译；
v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能；

自定义指令

vue 的自定义指定并不是一个必需的功能，所有自定义指令完成的需求，都可以通过其他的方式去完成。

一个自定义指令大概像下面这样：

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果你想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性。

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

函数简写

如果只需要关注 bind 和 update 时触发相同的行为，也可以这样写：

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

# Vue 指令的本质

# vue 指令

# 内置指令

# 自定义指令

# 钩子函数

# 函数简写