#概覽

下面是對(duì)變更的簡(jiǎn)要總結(jié)：

• API 已重命名，以便更好地與組件生命周期保持一致
• 自定義指令將由子組件通過(guò) v-bind="$attrs"

更多信息，請(qǐng)繼續(xù)閱讀！

#2.x 語(yǔ)法

在 Vue 2，自定義指令是通過(guò)使用下面列出的鉤子來(lái)創(chuàng)建的，這些鉤子都是可選的

• bind - 指令綁定到元素后發(fā)生。只發(fā)生一次。
• inserted - 元素插入父 DOM 后發(fā)生。
• update - 當(dāng)元素更新，但子元素尚未更新時(shí)，將調(diào)用此鉤子。
• componentUpdated - 一旦組件和子級(jí)被更新，就會(huì)調(diào)用這個(gè)鉤子。
• unbind - 一旦指令被移除，就會(huì)調(diào)用這個(gè)鉤子。也只調(diào)用一次。

下面是一個(gè)例子：

<p v-highlight="yellow">高亮顯示此文本亮黃色</p>

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})

在這里，在這個(gè)元素的初始設(shè)置中，指令通過(guò)傳遞一個(gè)值來(lái)綁定樣式，該值可以通過(guò)應(yīng)用程序更新為不同的值。

#3.x 語(yǔ)法

然而，在 Vue 3 中，我們?yōu)樽远x指令創(chuàng)建了一個(gè)更具凝聚力的 API。正如你所看到的，它們與我們的組件生命周期方法有很大的不同，即使我們正與類(lèi)似的事件鉤子，我們現(xiàn)在把它們統(tǒng)一起來(lái)了：

• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！這是在元素本身更新之前調(diào)用的，很像組件生命周期鉤子。
• update → 移除！有太多的相似之處要更新，所以這是多余的，請(qǐng)改用 updated。
• componentUpdated → updated
• beforeUnmount：新的！與組件生命周期鉤子類(lèi)似，它將在卸載元素之前調(diào)用。
• unbind -> unmounted

最終 API 如下：

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // 新
  unmounted() {}
}

生成的 API 可以這樣使用，與前面的示例相同：

<p v-highlight="yellow">高亮顯示此文本亮黃色</p>

const app = Vue.createApp({})


app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})

既然定制指令生命周期鉤子映射了組件本身的那些，那么它們就更容易推理和記住了！

#邊界情況：訪問(wèn)組件實(shí)例

通常建議保持指令獨(dú)立于它們所使用的組件實(shí)例。從自定義指令中訪問(wèn)實(shí)例通常表明該指令本身應(yīng)該是一個(gè)組件。然而，在某些情況下，這實(shí)際上是有意義的。

在Vue 2中，必須通過(guò)vnode參數(shù)訪問(wèn)組件實(shí)例：

bind(el, binding, vnode) {
  const vm = vnode.context
}

在Vue 3中，實(shí)例現(xiàn)在是bind的一部分：

mounted(el, binding, vnode) {
  const vm = binding.instance
}

#實(shí)施細(xì)節(jié)

在 Vue 3 中，我們現(xiàn)在支持片段，這允許我們?yōu)槊總€(gè)組件返回多個(gè) DOM 節(jié)點(diǎn)。你可以想象，對(duì)于具有多個(gè) <li> 的組件或一個(gè)表的子元素這樣的組件有多方便：

<template>
  <li>Hello</li>
  <li>Vue</li>
  <li>Devs!</li>
</template>

如此靈活，我們可能會(huì)遇到一個(gè)定制指令的問(wèn)題，它可能有多個(gè)根節(jié)點(diǎn)。

因此，自定義指令現(xiàn)在作為虛擬 DOM 節(jié)點(diǎn)數(shù)據(jù)的一部分包含在內(nèi)。當(dāng)在組件上使用自定義指令時(shí)，鉤子作為無(wú)關(guān)的 prop 傳遞到組件，并以 this.$attrs 結(jié)束。

這也意味著可以像這樣在模板中直接掛接到元素的生命周期中，這在涉及到自定義指令時(shí)非常方便：

<div @vnodeMounted="myHook" />

這與屬性 fallthrough 行為是一致的，因此，當(dāng)子組件在內(nèi)部元素上使用 v-bind="$attrs" 時(shí)，它也將應(yīng)用對(duì)其使用的任何自定義指令。