> 在 Vue 2 中，自定义指令的生命周期：
* **bind**\- 指令绑定到元素后调用。只调用一次。
* **inserted**\- 元素插入父 DOM 后调用。
* **update**\- 当元素更新，但子元素尚未更新时，将调用此钩子。
* **componentUpdated**\- 一旦组件和子级被更新，就会调用这个钩子。
* **unbind**\- 一旦指令被移除，就会调用这个钩子。也只调用一次。
> vue3的自定义指令生命周期：
* **created**\- 新增！在元素的 attribute 或事件监听器被应用之前调用。
* **beforeMount**\- 指令绑定到元素后调用。只调用一次 （vue2的bind生命周期）
* **mounted**\- 元素插入父 DOM 后调用。（vue2的inserted生命周期）
* **updated**\- 一旦组件和子级被更新，就会调用这个钩子。
* **beforeUnmount**：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
* **unmounted**\- 一旦指令被移除，就会调用这个钩子。也只调用一次。(vue2中的unbind)
vue3的自定义指令
```
<template>
<p v-highlight="'yellow'">以亮黄色高亮显示此文本</p>
</template>
const app = Vue.createApp({})
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
```
在 Vue 3 中，获取指令所在的组件
```
app.directive('highlight', {
mounted(el, binding, vnode) {
const vm = binding.instance
}
})
```
