快捷導(dǎo)航

Vue中directive的鉤子函數(shù)(bind,inserted等)用法及使用說明

更新時(shí)間：2025年07月26日 11:37:23 作者：前端布洛芬

Vue指令鉤子函數(shù)（bind、inserted等）用于在不同階段操作元素,bind綁定時(shí)初始化,inserted插入DOM后執(zhí)行,update值變化時(shí)觸發(fā),componentUpdated全部更新后調(diào)用,unbind解綁時(shí)清理,根據(jù)需求選擇對(duì)應(yīng)鉤子實(shí)現(xiàn)功能增強(qiáng)

Vue中directive的鉤子函數(shù)(bind,inserted等)用法

在 Vue 里，指令（directive）是個(gè)超實(shí)用的東西，它能讓你在不改動(dòng)組件邏輯的情況下，給 HTML 元素添加一些特殊的行為。Vue 指令有好幾個(gè)鉤子函數(shù)，下面我就挨個(gè)給你講講這些鉤子函數(shù)的作用和使用場(chǎng)景，還會(huì)附上帶注釋的代碼示例。

1.bind鉤子函數(shù)

作用：bind 鉤子函數(shù)會(huì)在指令第一次綁定到元素上時(shí)調(diào)用，而且只調(diào)用一次。這時(shí)候你可以做一些初始化的操作，比如設(shè)置一些默認(rèn)值、添加事件監(jiān)聽器之類的。
使用場(chǎng)景：當(dāng)你需要在指令綁定到元素時(shí)就進(jìn)行一些初始化操作，就可以用 bind 鉤子函數(shù)。

// 自定義一個(gè)名為 'focus' 的指令
Vue.directive('focus', {
  // bind 鉤子函數(shù)，在指令第一次綁定到元素時(shí)調(diào)用
  bind: function (el) {
    // 給元素添加一個(gè)自定義屬性，用于標(biāo)記這個(gè)元素被綁定了 focus 指令
    el.setAttribute('data-focus', 'true');
    // 打印一條消息，提示指令已經(jīng)綁定到元素上
    console.log('指令已綁定到元素上');
  }
});

// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
  el: '#app',
  template: '<input v-focus>'
});

2.inserted鉤子函數(shù)

作用：inserted 鉤子函數(shù)會(huì)在綁定元素被插入到父節(jié)點(diǎn)時(shí)調(diào)用。注意，這里的父節(jié)點(diǎn)必須是存在于 DOM 中的。
使用場(chǎng)景：當(dāng)你需要在元素插入到 DOM 后做一些操作，比如自動(dòng)聚焦、添加動(dòng)畫效果等，就可以用 inserted 鉤子函數(shù)。

// 自定義一個(gè)名為 'focus' 的指令
Vue.directive('focus', {
  // inserted 鉤子函數(shù)，在綁定元素被插入到父節(jié)點(diǎn)時(shí)調(diào)用
  inserted: function (el) {
    // 讓元素自動(dòng)獲得焦點(diǎn)
    el.focus();
    // 打印一條消息，提示元素已經(jīng)插入到 DOM 中
    console.log('元素已插入到 DOM 中');
  }
});

// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
  el: '#app',
  template: '<input v-focus>'
});

3.update鉤子函數(shù)

作用：update 鉤子函數(shù)會(huì)在包含組件的 VNode 更新時(shí)調(diào)用，但可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。
使用場(chǎng)景：當(dāng)你需要在組件更新時(shí)對(duì)指令綁定的元素做一些操作，就可以用 update 鉤子函數(shù)。

// 自定義一個(gè)名為 'highlight' 的指令
Vue.directive('highlight', {
  // update 鉤子函數(shù)，在包含組件的 VNode 更新時(shí)調(diào)用
  update: function (el, binding) {
    // 獲取指令的值
    const color = binding.value;
    // 設(shè)置元素的背景顏色為指令的值
    el.style.backgroundColor = color;
    // 打印一條消息，提示元素的背景顏色已更新
    console.log('元素的背景顏色已更新');
  }
});

// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
  el: '#app',
  data: {
    // 定義一個(gè)變量，用于存儲(chǔ)背景顏色
    highlightColor: 'yellow'
  },
  template: '<div v-highlight="highlightColor">這是一個(gè)高亮的 div</div>'
});

4.componentUpdated鉤子函數(shù)

作用：componentUpdated 鉤子函數(shù)會(huì)在包含組件的 VNode 及其子 VNode 全部更新后調(diào)用。
使用場(chǎng)景：當(dāng)你需要在組件和其子組件都更新完成后對(duì)指令綁定的元素做一些操作，就可以用 componentUpdated 鉤子函數(shù)。

// 自定義一個(gè)名為 'highlight' 的指令
Vue.directive('highlight', {
  // componentUpdated 鉤子函數(shù)，在包含組件的 VNode 及其子 VNode 全部更新后調(diào)用
  componentUpdated: function (el, binding) {
    // 獲取指令的值
    const color = binding.value;
    // 設(shè)置元素的背景顏色為指令的值
    el.style.backgroundColor = color;
    // 打印一條消息，提示元素的背景顏色已在組件更新后更新
    console.log('元素的背景顏色已在組件更新后更新');
  }
});

// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
  el: '#app',
  data: {
    // 定義一個(gè)變量，用于存儲(chǔ)背景顏色
    highlightColor: 'yellow'
  },
  template: '<div v-highlight="highlightColor">這是一個(gè)高亮的 div</div>'
});

5.unbind鉤子函數(shù)

作用：unbind 鉤子函數(shù)會(huì)在指令與元素解綁時(shí)調(diào)用，而且只調(diào)用一次。這時(shí)候你可以做一些清理工作，比如移除事件監(jiān)聽器。
使用場(chǎng)景：當(dāng)你需要在指令與元素解綁時(shí)做一些清理工作，就可以用 unbind 鉤子函數(shù)。

// 自定義一個(gè)名為 'click-outside' 的指令
Vue.directive('click-outside', {
  // bind 鉤子函數(shù)，在指令第一次綁定到元素時(shí)調(diào)用
  bind: function (el, binding, vnode) {
    // 定義一個(gè)點(diǎn)擊事件處理函數(shù)
    el.clickOutsideEvent = function (event) {
      // 判斷點(diǎn)擊事件是否發(fā)生在元素外部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果點(diǎn)擊事件發(fā)生在元素外部，調(diào)用指令綁定的方法
        vnode.context[binding.expression](event);
      }
    };
    // 給 document 添加點(diǎn)擊事件監(jiān)聽器
    document.addEventListener('click', el.clickOutsideEvent);
  },
  // unbind 鉤子函數(shù)，在指令與元素解綁時(shí)調(diào)用
  unbind: function (el) {
    // 移除 document 上的點(diǎn)擊事件監(jiān)聽器
    document.removeEventListener('click', el.clickOutsideEvent);
    // 刪除元素上的點(diǎn)擊事件處理函數(shù)
    delete el.clickOutsideEvent;
    // 打印一條消息，提示指令已與元素解綁
    console.log('指令已與元素解綁');
  }
});

// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
  el: '#app',
  methods: {
    // 定義一個(gè)方法，用于處理點(diǎn)擊元素外部的事件
    handleClickOutside: function () {
      console.log('點(diǎn)擊了元素外部');
    }
  },
  template: '<div v-click-outside="handleClickOutside">點(diǎn)擊這個(gè) div 外部試試</div>'
});

這些鉤子函數(shù)能讓你在不同的階段對(duì)指令綁定的元素進(jìn)行操作，大大增強(qiáng)了 Vue 指令的靈活性。你可以根據(jù)具體的需求選擇合適的鉤子函數(shù)來使用。