快捷導(dǎo)航

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

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

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

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

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

1.bind鉤子函數(shù)

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

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

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

2.inserted鉤子函數(shù)

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

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

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

3.update鉤子函數(shù)

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

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

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

4.componentUpdated鉤子函數(shù)

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

// 自定義一個名為 '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)建一個 Vue 實例
new Vue({
  el: '#app',
  data: {
    // 定義一個變量，用于存儲背景顏色
    highlightColor: 'yellow'
  },
  template: '<div v-highlight="highlightColor">這是一個高亮的 div</div>'
});

5.unbind鉤子函數(shù)

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

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

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

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