如何理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理

如何理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

Vue2.x用法

全局注冊

Vue.directive( 指令名, { 自定義指令生命周期 } )

局部注冊

directives: { 指令名, { 自定義指令生命周期 } }

使用

v-指令名: 屬性名.修飾符=“value值”

鉤子函數(shù)

bind - 自定義指令綁定到 DOM 后調(diào)用. 只調(diào)用一次, 注意: 只是加入進了DOM, 但是渲染沒有完成

inserted - 自定義指令所在DOM, 插入到父 DOM 后調(diào)用, 渲染已完成(最最重要)

update - 元素更新, 但子元素尚未更新, 將調(diào)用此鉤子( 自定義指令所在組件更新時執(zhí)行, 但是不保證更新完成 ) —> 和自定義所在組件有關(guān)

componentUpdated - 組件和子級更新后執(zhí)行( 自定義指令所在組件更新完成, 且子組件也完成更新 ),

—> 和自定義所在組件有關(guān)

unbind - 解綁(銷毀) .( 自定義指令所在 DOM 銷毀時執(zhí)行 ). 只調(diào)用一次

鉤子函數(shù)的參數(shù)

注意: 自定義指令中, 都不能直接使用this

1.el: 當前指令所在的dom元素。

2.binding: 是一個對象, 表示當前指令上的屬性、修飾符、value值等信息。只有value最重要, 常用

arg：String, 屬性名 。例如 v-my-directive:foo 中，屬性名為 “foo”。

modifiers：Object, 包含所有修飾符的一個對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

name：String, 指令名，不包括 v- 前綴。

rawName, String, 完整指令名，例如 v-my-directive:foo.bar=“1 + 1” 中, 完整指令名就是 v-my-directive:foo.bar=“1 + 1”

value：Any, 指令綁定的當前值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。(最最重要)

expression：String, 解析的哪一個值、表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。

oldValue：Any, 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

oldArg：Any, 指令屬性名的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

3.vnode：當前節(jié)點信息, 可以獲取, 當前指令所在組件的實例 vnode.context - 當前指令所在的實例對象

4.oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

Vue3.x用法

用法和 Vue2.x 一樣

全局注冊

Vue.directive( 指令名, { 自定義指令生命周期 } )

局部注冊

directives: { 指令名, { 自定義指令生命周期 } }

使用

v-指令名: 屬性名.修飾符=“value值”

以插件的形式, 進行全局注冊

鉤子函數(shù)

較 Vue2.x 相比, 鉤子函數(shù)有變化

最終的 API 如下：

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

created - 自定義指令所在組件, 創(chuàng)建后

beforeMount - 就是Vue2.x中的 bind, 自定義指令綁定到 DOM 后調(diào)用. 只調(diào)用一次, 注意: 只是加入進了DOM, 但是渲染沒有完成

mounted - 就是Vue2.x中的 inserted, 自定義指令所在DOM, 插入到父 DOM 后調(diào)用, 渲染已完成(最最重要)

beforeUpdate - 自定義指令所在 DOM, 更新之前調(diào)用

updated - 就是Vue2.x中的 componentUpdated

beforeUnmount - 銷毀前

unmounted - 銷毀后

關(guān)于如何理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。