这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
简介
除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
vue2/3的差异
vue2 / 3版本的自定义有所不同。
在vue2中 在 Vue 2 中，自定义指令通过使用下列钩子来创建，以对齐元素的生命周期，它们都是可选的：
- bind - 指令绑定到元素后调用。只调用一次。
- inserted - 元素插入父 DOM 后调用。
- update - 当元素更新，但子元素尚未更新时，将调用此钩子。
- componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
- unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。
然而，在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使钩子的目标事件十分相似。我们现在把它们统一起来了：
- created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
- bind → beforeMount
- inserted → mounted
- beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
- update → 移除！该钩子与
updated有太多相似之处，因此它是多余的。请改用updated。 - componentUpdated → updated
- beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
- unbind -> unmounted
生命周期函数的替换使得我们的开发，可以少记两个钩子函数，也更加的方便。
vue3案例：
<p v-highlight="'yellow'">以亮黄色高亮显示此文本</p>
const app = Vue.createApp({})
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
边界情况：访问组件实例
通常来说，建议在组件实例中保持所使用的指令的独立性。从自定义指令中访问组件实例，通常意味着该指令本身应该是一个组件。然而，在某些情况下这种用法是有意义的。
在 Vue 2 中，必须通过 vnode 参数访问组件实例：
bind(el, binding, vnode) {
const vm = vnode.context
}
在 Vue 3 中，实例现在是 binding 参数的一部分：
mounted(el, binding, vnode) {
const vm = binding.instance
}
