Vue 3.0自定義指令的使用入門
提示：在閱讀本文前，建議您先閱讀 Vue 3 官方文檔 自定義指令 章節(jié)的內(nèi)容。
一、自定義指令
1、注冊全局自定義指令
const app = Vue.createApp({})
// 注冊一個全局自定義指令 v-focus
app.directive('focus', {
// 當被綁定的元素掛載到 DOM 中時被調(diào)用
mounted(el) {
// 聚焦元素
el.focus()
}
})
2、使用全局自定義指令
<div id="app"> <input v-focus /> </div>
3、完整的使用示例
<div id="app">
<input v-focus />
</div>
<script>
const { createApp } = Vue
const app = Vue.createApp({}) // ①
app.directive('focus', { // ②
// 當被綁定的元素掛載到 DOM 中時被調(diào)用
mounted(el) {
el.focus() // 聚焦元素
}
})
app.mount('#app') // ③
</script>
當頁面加載完成后，頁面中的輸入框元素將自動獲得焦點。該示例的代碼比較簡單，主要包含 3 個步驟：創(chuàng)建 App 對象、注冊全局自定義指令和應用掛載。其中創(chuàng)建 App 對象的細節(jié)，阿寶哥會在后續(xù)的文章中單獨介紹，下面我們將重點分析其他 2 個步驟。首先我們先來分析注冊全局自定義指令的過程。
二、注冊全局自定義指令的過程
在以上示例中，我們使用 app 對象的 directive 方法來注冊全局自定義指令：
app.directive('focus', {
// 當被綁定的元素掛載到 DOM 中時被調(diào)用
mounted(el) {
el.focus() // 聚焦元素
}
})
當然，除了注冊全局自定義指令外，我們也可以注冊局部指令，因為組件中也接受一個 directives 的選項：
directives: {
focus: {
mounted(el) {
el.focus()
}
}
}
對于以上示例來說，我們使用的 app.directive 方法被定義在 runtime-core/src/apiCreateApp.ts 文件中：
// packages/runtime-core/src/apiCreateApp.ts
export function createAppAPI<HostElement>(
render: RootRenderFunction,
hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
return function createApp(rootComponent, rootProps = null) {
const context = createAppContext()
let isMounted = false
const app: App = (context.app = {
// 省略部分代碼
_context: context,
// 用于注冊或檢索全局指令。
directive(name: string, directive?: Directive) {
if (__DEV__) {
validateDirectiveName(name)
}
if (!directive) {
return context.directives[name] as any
}
if (__DEV__ && context.directives[name]) {
warn(`Directive "${name}" has already been registered in target app.`)
}
context.directives[name] = directive
return app
},
return app
}
}
通過觀察以上代碼，我們可以知道 directive 方法支持以下兩個參數(shù)：
- name：表示指令的名稱；
- directive（可選）：表示指令的定義。
name 參數(shù)比較簡單，所以我們重點分析 directive 參數(shù)，該參數(shù)的類型是 Directive 類型：
// packages/runtime-core/src/directives.ts export type Directive<T = any, V = any> = | ObjectDirective<T, V> | FunctionDirective<T, V>
由上可知 Directive 類型屬于聯(lián)合類型，所以我們需要繼續(xù)分析 ObjectDirective 和 FunctionDirective 類型。這里我們先來看一下 ObjectDirective 類型的定義：
// packages/runtime-core/src/directives.ts
export interface ObjectDirective<T = any, V = any> {
created?: DirectiveHook<T, null, V>
beforeMount?: DirectiveHook<T, null, V>
mounted?: DirectiveHook<T, null, V>
beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>
updated?: DirectiveHook<T, VNode<any, T>, V>
beforeUnmount?: DirectiveHook<T, null, V>
unmounted?: DirectiveHook<T, null, V>
getSSRProps?: SSRDirectiveHook
}
該類型定義了對象類型的指令，對象上的每個屬性表示指令生命周期上的鉤子。而 FunctionDirective 類型則表示函數(shù)類型的指令：
// packages/runtime-core/src/directives.ts export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V> export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = ( el: T, binding: DirectiveBinding<V>, vnode: VNode<any, T>, prevVNode: Prev ) => void
介紹完 Directive 類型，我們再回顧一下前面的示例，相信你就會清晰很多：
app.directive('focus', {
// 當被綁定的元素掛載到 DOM 中時觸發(fā)
mounted(el) {
el.focus() // 聚焦元素
}
})
對于以上示例，當我們調(diào)用 app.directive 方法注冊自定義 focus 指令時，就會執(zhí)行以下邏輯：
directive(name: string, directive?: Directive) {
if (__DEV__) { // 避免自定義指令名稱，與已有的內(nèi)置指令名稱沖突
validateDirectiveName(name)
}
if (!directive) { // 獲取name對應的指令對象
return context.directives[name] as any
}
if (__DEV__ && context.directives[name]) {
warn(`Directive "${name}" has already been registered in target app.`)
}
context.directives[name] = directive // 注冊全局指令
return app
}
當 focus 指令注冊成功之后，該指令會被保存在 context 對象的 directives 屬性中，具體如下圖所示：
顧名思義 context 是表示應用的上下文對象，那么該對象是如何創(chuàng)建的呢？其實，該對象是通過 createAppContext 函數(shù)來創(chuàng)建的：
const context = createAppContext()
而 createAppContext 函數(shù)被定義在 runtime-core/src/apiCreateApp.ts 文件中：
// packages/runtime-core/src/apiCreateApp.ts
export function createAppContext(): AppContext {
return {
app: null as any,
config: {
isNativeTag: NO,
performance: false,
globalProperties: {},
optionMergeStrategies: {},
isCustomElement: NO,
errorHandler: undefined,
warnHandler: undefined
},
mixins: [],
components: {},
directives: {},
provides: Object.create(null)
}
}
看到這里，是不是覺得注冊全局自定義指令的內(nèi)部處理邏輯其實挺簡單的。那么對于已注冊的 focus 指令，何時會被調(diào)用呢？要回答這個問題，我們就需要分析另一個步驟 —— 應用掛載。
三、應用掛載的過程
為了更加直觀地了解應用掛載的過程，阿寶哥利用 Chrome 開發(fā)者工具，記錄了應用掛載的主要過程：
通過上圖，我們就可以知道應用掛載期間所經(jīng)歷的主要過程。此外，從圖中我們也發(fā)現(xiàn)了一個與指令相關的函數(shù) resolveDirective。很明顯，該函數(shù)用于解析指令，且該函數(shù)在 render 方法中會被調(diào)用。在源碼中，我們找到了該函數(shù)的定義：
// packages/runtime-core/src/helpers/resolveAssets.ts
export function resolveDirective(name: string): Directive | undefined {
return resolveAsset(DIRECTIVES, name)
}
在 resolveDirective 函數(shù)內(nèi)部，會繼續(xù)調(diào)用 resolveAsset 函數(shù)來執(zhí)行具體的解析操作。在分析 resolveAsset 函數(shù)的具體實現(xiàn)之前，我們在 resolveDirective 函數(shù)內(nèi)部加個斷點，來一睹 render 方法的 “芳容”：
在上圖中，我們看到了與 focus 指令相關的 _resolveDirective("focus") 函數(shù)調(diào)用。前面我們已經(jīng)知道在 resolveDirective 函數(shù)內(nèi)部會繼續(xù)調(diào)用 resolveAsset 函數(shù)，該函數(shù)的具體實現(xiàn)如下：
// packages/runtime-core/src/helpers/resolveAssets.ts
function resolveAsset(
type: typeof COMPONENTS | typeof DIRECTIVES,
name: string,
warnMissing = true
) {
const instance = currentRenderingInstance || currentInstance
if (instance) {
const Component = instance.type
// 省略解析組件的處理邏輯
const res =
// 局部注冊
resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
// 全局注冊
resolve(instance.appContext[type], name)
return res
} else if (__DEV__) {
warn(
`resolve${capitalize(type.slice(0, -1))} ` +
`can only be used in render() or setup().`
)
}
}
因為注冊 focus 指令時，使用的是全局注冊的方式，所以解析的過程會執(zhí)行 resolve(instance.appContext[type], name) 該語句，其中 resolve 方法的定義如下：
function resolve(registry: Record<string, any> | undefined, name: string) {
return (
registry &&
(registry[name] ||
registry[camelize(name)] ||
registry[capitalize(camelize(name))])
)
}
分析完以上的處理流程，我們可以知道在解析全局注冊的指令時，會通過 resolve 函數(shù)從應用的上下文對象中獲取已注冊的指令對象。在獲取到 _directive_focus 指令對象后，render 方法內(nèi)部會繼續(xù)調(diào)用 _withDirectives 函數(shù)，用于把指令添加到 VNode 對象上，該函數(shù)被定義在 runtime-core/src/directives.ts 文件中：
// packages/runtime-core/src/directives.ts
export function withDirectives<T extends VNode>(
vnode: T,
directives: DirectiveArguments
): T {
const internalInstance = currentRenderingInstance // 獲取當前渲染的實例
const instance = internalInstance.proxy
const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])
for (let i = 0; i < directives.length; i++) {
let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]
// 在 mounted 和 updated 時，觸發(fā)相同行為，而不關系其他的鉤子函數(shù)
if (isFunction(dir)) { // 處理函數(shù)類型指令
dir = {
mounted: dir,
updated: dir
} as ObjectDirective
}
bindings.push({
dir,
instance,
value,
oldValue: void 0,
arg,
modifiers
})
}
return vnode
}
因為一個節(jié)點上可能會應用多個指令，所以 withDirectives 函數(shù)在 VNode 對象上定義了一個 dirs 屬性且該屬性值為數(shù)組。對于前面的示例來說，在調(diào)用 withDirectives 函數(shù)之后，VNode 對象上就會新增一個 dirs 屬性，具體如下圖所示：
通過上面的分析，我們已經(jīng)知道在組件的 render 方法中，我們會通過 withDirectives 函數(shù)把指令注冊對應的 VNode 對象上。那么 focus 指令上定義的鉤子什么時候會被調(diào)用呢？在繼續(xù)分析之前，我們先來介紹一下指令對象所支持的鉤子函數(shù)。
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
- created：在綁定元素的屬性或事件監(jiān)聽器被應用之前調(diào)用。
- beforeMount：當指令第一次綁定到元素并且在掛載父組件之前調(diào)用。
- mounted：在綁定元素的父組件被掛載后調(diào)用。
- beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。
- updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。
- beforeUnmount：在卸載綁定元素的父組件之前調(diào)用。
- unmounted：當指令與元素解除綁定且父組件已卸載時，只調(diào)用一次。
介紹完這些鉤子函數(shù)之后，我們再來回顧一下前面介紹的 ObjectDirective 類型：
// packages/runtime-core/src/directives.ts
export interface ObjectDirective<T = any, V = any> {
created?: DirectiveHook<T, null, V>
beforeMount?: DirectiveHook<T, null, V>
mounted?: DirectiveHook<T, null, V>
beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>
updated?: DirectiveHook<T, VNode<any, T>, V>
beforeUnmount?: DirectiveHook<T, null, V>
unmounted?: DirectiveHook<T, null, V>
getSSRProps?: SSRDirectiveHook
好的，接下來我們來分析一下 focus 指令上定義的鉤子什么時候被調(diào)用。同樣，阿寶哥在 focus 指令的 mounted 方法中加個斷點：
在圖中右側(cè)的調(diào)用棧中，我們看到了 invokeDirectiveHook 函數(shù)，很明顯該函數(shù)的作用就是調(diào)用指令上已注冊的鉤子。出于篇幅考慮，具體的細節(jié)阿寶哥就不繼續(xù)介紹了，感興趣的小伙伴可以自行斷點調(diào)試一下。
四、阿寶哥有話說
4.1 Vue 3 有哪些內(nèi)置指令？
在介紹注冊全局自定義指令的過程中，我們看到了一個 validateDirectiveName 函數(shù)，該函數(shù)用于驗證自定義指令的名稱，從而避免自定義指令名稱，與已有的內(nèi)置指令名稱沖突。
// packages/runtime-core/src/directives.ts
export function validateDirectiveName(name: string) {
if (isBuiltInDirective(name)) {
warn('Do not use built-in directive ids as custom directive id: ' + name)
}
}
在 validateDirectiveName 函數(shù)內(nèi)部，會通過 isBuiltInDirective(name) 語句來判斷是否為內(nèi)置指令：
const isBuiltInDirective = /*#__PURE__*/ makeMap( 'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text' )
以上代碼中的 makeMap 函數(shù)，用于生成一個 map 對象（Object.create(null)）并返回一個函數(shù)，用于檢測某個 key 是否存在 map 對象中。另外，通過以上代碼，我們就可以很清楚地了解 Vue 3 中為我們提供了哪些內(nèi)置指令。
4.2 指令有幾種類型？
在 Vue 3 中指令分為 ObjectDirective 和 FunctionDirective 兩種類型：
// packages/runtime-core/src/directives.ts export type Directive<T = any, V = any> = | ObjectDirective<T, V> | FunctionDirective<T, V>
ObjectDirective
export interface ObjectDirective<T = any, V = any> {
created?: DirectiveHook<T, null, V>
beforeMount?: DirectiveHook<T, null, V>
mounted?: DirectiveHook<T, null, V>
beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>
updated?: DirectiveHook<T, VNode<any, T>, V>
beforeUnmount?: DirectiveHook<T, null, V>
unmounted?: DirectiveHook<T, null, V>
getSSRProps?: SSRDirectiveHook
}
FunctionDirective
export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V> export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = ( el: T, binding: DirectiveBinding<V>, vnode: VNode<any, T>, prevVNode: Prev ) => void
如果你想在 mounted 和 updated 時觸發(fā)相同行為，而不關心其他的鉤子函數(shù)。那么你可以通過將回調(diào)函數(shù)傳遞給指令來實現(xiàn)
app.directive('pin', (el, binding) => {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
})
4.3 注冊全局指令與局部指令有什么區(qū)別？
注冊全局指令
app.directive('focus', {
// 當被綁定的元素掛載到 DOM 中時被調(diào)用
mounted(el) {
el.focus() // 聚焦元素
}
});
注冊局部指令
const Component = defineComponent({
directives: {
focus: {
mounted(el) {
el.focus()
}
}
},
render() {
const { directives } = this.$options;
return [withDirectives(h('input'), [[directives.focus, ]])]
}
});
解析全局注冊和局部注冊的指令
// packages/runtime-core/src/helpers/resolveAssets.ts
function resolveAsset(
type: typeof COMPONENTS | typeof DIRECTIVES,
name: string,
warnMissing = true
) {
const instance = currentRenderingInstance || currentInstance
if (instance) {
const Component = instance.type
// 省略解析組件的處理邏輯
const res =
// 局部注冊
resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
// 全局注冊
resolve(instance.appContext[type], name)
return res
}
}
4.4 內(nèi)置指令和自定義指令生成的渲染函數(shù)有什么區(qū)別？
要了解內(nèi)置指令和自定義指令生成的渲染函數(shù)的區(qū)別，阿寶哥以 v-if 、v-show 內(nèi)置指令和 v-focus 自定義指令為例，然后使用 Vue 3 Template Explorer 這個在線工具來編譯生成渲染函數(shù)：
v-if 內(nèi)置指令
<input v-if="isShow" />
const _Vue = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock,
createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
return isShow
? (_openBlock(), _createBlock("input", { key: 0 }))
: _createCommentVNode("v-if", true)
}
}
對于 v-if 指令來說，在編譯后會通過 ?: 三目運算符來實現(xiàn)動態(tài)創(chuàng)建節(jié)點的功能。
v-show 內(nèi)置指令
<input v-show="isShow" />
const _Vue = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
with (_ctx) {
const { vShow: _vShow, createVNode: _createVNode, withDirectives: _withDirectives,
openBlock: _openBlock, createBlock: _createBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock("input", null, null, 512 /* NEED_PATCH */)), [
[_vShow, isShow]
])
}
}
以上示例中的 vShow 指令被定義在 packages/runtime-dom/src/directives/vShow.ts 文件中，該指令屬于 ObjectDirective 類型的指令，該指令內(nèi)部定義了 beforeMount、mounted、updated 和 beforeUnmount 四個鉤子。
v-focus 自定義指令
<input v-focus />
const _Vue = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
with (_ctx) {
const { resolveDirective: _resolveDirective, createVNode: _createVNode,
withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _directive_focus = _resolveDirective("focus")
return _withDirectives((_openBlock(), _createBlock("input", null, null, 512 /* NEED_PATCH */)), [
[_directive_focus]
])
}
}
通過對比 v-focus 與 v-show 指令生成的渲染函數(shù)，我們可知 v-focus 自定義指令與 v-show 內(nèi)置指令都會通過 withDirectives 函數(shù)，把指令注冊到 VNode 對象上。而自定義指令相比內(nèi)置指令來說，會多一個指令解析的過程。
此外，如果在 input 元素上，同時應用了 v-show 和 v-focus 指令，則在調(diào)用 _withDirectives 函數(shù)時，將使用二維數(shù)組：
<input v-show="isShow" v-focus />
const _Vue = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
with (_ctx) {
const { vShow: _vShow, resolveDirective: _resolveDirective, createVNode: _createVNode,
withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _directive_focus = _resolveDirective("focus")
return _withDirectives((_openBlock(), _createBlock("input", null, null, 512 /* NEED_PATCH */)), [
[_vShow, isShow],
[_directive_focus]
])
}
}
4.5 如何在渲染函數(shù)中應用指令？
除了在模板中應用指令之外，利用前面介紹的 withDirectives 函數(shù)，我們可以很方便地在渲染函數(shù)中應用指定的指令：
<div id="app"></div>
<script>
const { createApp, h, vShow, defineComponent, withDirectives } = Vue
const Component = defineComponent({
data() {
return { value: true }
},
render() {
return [withDirectives(h('div', '我是阿寶哥'), [[vShow, this.value]])]
}
});
const app = Vue.createApp(Component)
app.mount('#app')
</script>
本文阿寶哥主要介紹了在 Vue 3 中如何自定義指令、如何注冊全局和局部指令。為了讓大家能夠更深入地掌握自定義指令的相關知識，阿寶哥從源碼的角度分析了指令的注冊和應用過程。
在后續(xù)的文章中，阿寶哥將會介紹一些特殊的指令，當然也會重點分析一下雙向綁定的原理，感興趣的小伙伴不要錯過喲。
以上就是Vue 3.0自定義指令的使用入門的詳細內(nèi)容，更多關于Vue 3.0自定義指令的使用的資料請關注腳本之家其它相關文章！
相關文章
在開發(fā)Vue項目我們一般使用第三方UI組件庫進行開發(fā),但是這些組件提供的接口并不一定滿足我們的需求,這時我們可以通過對組件庫組件的二次封裝,來滿足我們特殊的需求,這篇文章主要給大家介紹了關于vue二次封裝一個高頻可復用組件的相關資料,需要的朋友可以參考下2022-10-10
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問子組件實例以及使用 $children 和 $parent 訪問父子組件實例2023-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)div拖拽互換位置的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
今天在寫項目掉接口的時候有一個接口需要到了用戶的ip地址,查了半天覺得這個方法不錯,下面這篇文章主要給大家介紹了關于vue前端通過騰訊接口獲取用戶ip的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關于vue3?Table分頁保留選中狀態(tài)的相關資料,vue table組件是一個非常方便的表格組件,它可以幫助我們實現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
本文講解了如何在Linux環(huán)境中部署Vue項目,包括安裝依賴、編譯項目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細說明了使用Nginx作為靜態(tài)資源服務器和反向代理的步驟,以及進行性能、安全性測試和備份的重要性,需要的朋友可以參考下2024-09-09
在Vue.js中,頁面跳轉(zhuǎn)是構(gòu)建單頁面應用（SPA）的基本操作之一,本文將介紹Vue中實現(xiàn)頁面跳轉(zhuǎn)的幾種方法,并通過實例代碼幫助理解每種方法的用法,需要的朋友可以參考下2024-09-09
VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決
這篇文章主要介紹了VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題
這篇文章主要介紹了Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01