> 在 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
}
})
```
