理解Vue2.x和Vue3.x自定義指令用法及鉤子函式原理
目錄
- 2.x用法
- 全域性註冊
- 區域性註冊
- 使用
- 鉤子函式
- 鉤子函式的引數
- Vue3.x用法
- 全域性註冊
- 區域性註冊
- 使用
- 鉤子函式
- 較 Vue2.x 相比,鉤子函式有變化
Vue2.x用法
全域性註冊
Vue.directive( 指令名,{ 自定義指令生命週期 } )
區域性註冊
directives: { 指令名,{ 自定義指令生命週期 } }
使用
v-指令名: 屬性名.修飾符=“value值”
鉤子函式
bind
- 自定義指令繫結到 DOM 後呼叫. 只調用一次,注意: 只是加入進了DOM,但是渲染沒有完成
inserted
- 自定義指令所在DOM,插入到父 DOM 後呼叫www.cppcns.com,渲染已完成(最最重要)
update
- 元素更新,但子元素尚未更新,將呼叫此鉤子( 自定義指令所在元件更新時執行,但是不保證更新完成 ) —> 和自定義所在元件有關
componentUpdated
- 元件和子級更新後執行( 自定義指令所在元件更新完成,且子元件也完成更新 ),
—> 和自定義所在元件有關
unbind
- 解綁(銷燬) .( 自定義指令所在 DOM 銷燬時執行 ). 只調用一次
鉤子函式的引數
注意: 自定義指令中,都不能直接使用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
:RcAdZPHkTWString,指令名,不包括 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,www.cppcns.com 指令繫結的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
oldArg
:Any,指令屬性名的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
3.vnode
:當前節點資訊,可以獲取,當前指令所在元件的例項 vnode.context - 當前指令所在的例項物件
4.oldVnode
:上一個虛擬節點,僅在 update 和 componentUpdated 鉤子中可用。
Vue3.x用法
用法和 Vue2.x 一樣
全域性註冊
Vue.directive( 指令名,{ 自定義指令生命週期 } )
區域性註冊
directives: { 指令名,{ 自定義指令生命週期 } }
使用
v-指令名: 屬性名.修飾符=“value值”
以外掛的形式,進行全域性註冊
鉤子函式
較 Vue2.x 相比,鉤子函式有變化
最終的 API 如下:
const MyDirective = { created(el,binding,vnode,prevVnode) {},// 新增 beforeMount() {},mounted() {},beforeUpdate() {},// 新增 updated() {},beforeUnmount() {},// 新增 unmounted() {} }
created
- 自定義指令所在元件,建立後
beforeMount
- 就是Vue2.x中的 bind,自定義指令繫結到 DOM 後呼叫. 只調用一次,但是渲染沒有完成
mounted
- 就是Vue2.x中的 inserted,自定義指令所在DOM,插入到父 DOM 後呼叫,渲染已完成(最最重要)
beforeUpdate
- 自定義指令所在 DOM,更新之前呼叫
updated
- 就是Vue2.x中的 componentUpdated
beforeUnmount
- 銷燬前
unmounted
- 銷燬後
以上就是理解Vue2.x和Vue3.x自定義指令用法及鉤子函式原理的詳細內容,更多關於Vue2.x和Vue3.x的資料請關注我們其它相關文章!