vue2.x與vue3.x中自定義指令詳解(最新推薦)

Posted on by

🌮前言

vue自定義指令(2.x丨3.x)可以幫助我們實現需要操作，比如防抖、節流、懶加載、輸入框自動聚焦等等，使用起來非常方便，比如vue自帶的v-text、v-html、v-show、v-if等等。

🥙一、自定義指令分類

  • 局部自定義指令：隻在組件內有效
  • 全局自定義指令：所有組件都有效

🥪二、Vue2.x自定義指令鉤子函數

  • bind：隻會調用一次，指令 第一次 綁定到元素時會調用
  • inserted：被綁定元素插入父節點時調用 。
  • update：元素第一次綁定不會觸發，綁定的值發生更新觸發，可能發生在其子節點更新之前。
  • componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。
  • unbind：隻調用一次，指令與元素解綁時調用。

（1）bind與update區別

相同點：

  • dom插入都會調用，bind在inserted之前

異同點：

  • bind 時父節點為 null
  • inserted 時父節點存在
  • bind是在dom樹繪制前調用，inserted在dom樹繪制後調用

（2）update與componentUpdated區別

  • 組件更新都會調用，update在componentUpdated之前
  • update 組件更新前的狀態，componentUpdated 組件更新後的狀態
Vue.directive('focus', {
  inserted: function (el) {
    console.log(el.parentNode, 'inserted')
    el.focus();
  },
  bind: function (el) {
    console.log(el.parentNode, 'bind')
    el.focus();
  },
});

輸出結果如下，說明執行bind時，還沒父節點；執行inserted時，已有父節點。

（3）鉤子函數的參數（摘自官網）

  • el：指令所綁定的元素，可以用來直接操作 DOM。
  • binding：一個對象，包含以下 property：
  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  • expression：字符串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 “foo”。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
  • vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來瞭解更多詳情。
  • oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
 <p v-style:[direction]="connect">Enter connection information to connect</p>
    directives: {
        style: {
            bind(el,binding) {
              console.log(binding,'binding')
                el.style.fontSize = "30px";
                el.style.color = "blue";
            },
        },
    },

（4）局部自定義指令

在組件A.vue，用自定義指令實現改變文字顏色

<p v-style>文字描述</p>
 directives: {
    style: {
      bind(el,binding) {
        el.style.fontSize = "30px";
         el.style.color = "blue";
      },
      update(el,binding){
      el.style.fontSize = "30px";
      el.style.color = "blue";
      }
    },
  },
  • style：指令的名稱，使用的時候要加前面加個v-
  • bind：隻會調用一次，指令 第一次 綁定到元素時會調用
  • el：是指綁定的這個dom元素本身
  • binding：獲取綁定指令的信息（name：指令名稱；rawName：指令全稱：value：指定綁定的值）
  • update：元素第一次綁定不會觸發，綁定的值發生更新觸發，參數與binding是相同的，如果邏輯與bind相同的話可以直接把指令當成函數寫，上面的指令是對象類型。
  • v-style：使用指令改變瞭元素的樣式

（5）全局自定義指令

使用Vue.directive(‘指令名稱’,{鉤子函數})

  • 第一個參數為字符串，指令的名稱
  • 第二個參數是一個對象，用於接收指令的參數值
Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

（6）簡寫形式

如果update邏輯與bind相同的話可以直接把指令當成函數寫

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

🍔 三、Vue3.x自定義指令鉤子函數

（1）指令鉤子函數（摘自官網）

const myDirective = {
  // 在綁定元素的 attribute 前
  // 或事件監聽器應用前調用
  created(el, binding, vnode, prevVnode) {
    // 下面會介紹各個參數的細節
  },
  // 在元素被插入到 DOM 前調用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節點都掛載完成後調用
  mounted(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件更新前調用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節點都更新後調用
  updated(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載前調用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載後調用
  unmounted(el, binding, vnode, prevVnode) {}
}

（2）鉤子函數參數

指令的鉤子會傳遞以下幾種參數：

  • el：指令綁定到的元素。這可以用於直接操作 DOM。
  • binding：一個對象，包含以下屬性。
  • value：傳遞給指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
  • oldValue：之前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否更改，它都可用。
  • arg：傳遞給指令的參數 (如果有的話)。例如在 v-my-directive:foo 中，參數是 “foo”。
  • modifiers：一個包含修飾符的對象 (如果有的話)。例如在 v-my-directive.foo.bar 中，修飾符對象是 { foo: true, bar: true }。
  • instance：使用該指令的組件實例。
  • dir：指令的定義對象。
  • vnode：代表綁定元素的底層 VNode。
  • prevNode：之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。

（3）局部註冊兩種方式

<script lang="ts" setup>
// 局部指令, 變量名為駝峰命名(vFocus = v-focus)
const vFocus = {
  mounted: (el:any) => {
    el.focus()
    console.log(el, '已經自動獲得焦點')
  }
}
</script>
<script lang="ts">
const vFocus = {
    focus:  {
        mounted(el:any){
            el.focus();
            console.log(el, "已經自動獲得焦點");
        }
    },
};
export default {
    setup() { },
    directives: vFocus,
};
</script>

（4）全局註冊

組件A.vue

  <input type="text" v-focus>

在directives文件夾新建focus.ts文件

const directives: any = {
	mounted(el: any) {
		el.focus();
		el.value = '1'
	}
}
export default {
	name: "focus",
	directives
}

在directives文件夾新建index.js

import type { App } from 'vue'
import focus from './focus'
export default function installDirective(app: App) {
    app.directive(focus.name, focus.directives);
}

main.ts文件

import directives from './directives'
const app = createApp(App);
app.use(directives);

（5）簡化形式

當update和mounted中的函數體一樣時，則可以簡寫成如下：

const directives = (el:any) => {
		el.focus();
		el.value = '1';
}
export default {
	name: "focus",
	directives
}

到此這篇關於vue2.x與vue3.x中自定義指令詳解的文章就介紹到這瞭,更多相關vue2.x與vue3.x自定義指令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：