Vue 中的自定義指令和生命周期是前端開發(fā)的核心基礎(chǔ)，也是面試高頻考點。本文將從實用角度出發(fā)，梳理兩大知識點的核心用法，內(nèi)容簡潔易懂，貼合實際開發(fā)場景，助力快速掌握！

一、自定義指令：高效封裝 DOM 操作

自定義指令是 Vue 擴展 DOM 操作能力的核心方式，專門用來封裝重復(fù)的 DOM 相關(guān)邏輯，輕量且易復(fù)用，是內(nèi)置指令的重要補充。

1. 函數(shù)式自定義指令

基礎(chǔ)極簡寫法，適合無多階段控制的簡單場景，函數(shù)會在指令綁定元素和數(shù)據(jù)更新時自動執(zhí)行。

// 全局注冊：v-focus 輸入框自動聚焦
Vue.directive('focus', (el) => {
  el.focus() // el為指令綁定的DOM元素，可直接操作
})

適用場景：輸入框自動聚焦、簡單文本格式化、快速修改 DOM 基礎(chǔ)樣式等。

2. 對象式自定義指令

適合邏輯復(fù)雜的場景，通過多個內(nèi)置鉤子函數(shù)，實現(xiàn)指令從綁定到解綁的全階段精確控制，每個鉤子各司其職。

// 全局注冊：對象式自定義指令
Vue.directive('指令名', {
  bind(el) { // 指令綁定元素時執(zhí)行
    el.style.color = 'red'
  },
  update(el, binding) { // 數(shù)據(jù)更新時執(zhí)行
    el.innerText = binding.value
  }
})

適用場景：元素拖拽、圖片懶加載、DOM 事件監(jiān)聽 / 解綁等需要分階段處理的邏輯。

3. 自定義指令核心總結(jié)

核心鉤子執(zhí)行順序

bind（綁定）→ inserted（插入 DOM）→ update（數(shù)據(jù)更新）→ unbind（解綁）

關(guān)鍵注意事項

1. 所有鉤子中 this 指向 window，無法通過 this 訪問組件實例；
2. 全局注冊需在 Vue 實例創(chuàng)建前執(zhí)行，局部注冊僅當(dāng)前組件可用；
3. 涉及事件 / 定時器時，務(wù)必在 unbind 中清理，避免內(nèi)存泄漏。

二、Vue 生命周期：精準(zhǔn)控制組件的 “一生”

生命周期是 Vue 組件從創(chuàng)建→掛載→更新→銷毀的完整流程，Vue 會按固定順序自動觸發(fā)對應(yīng)的鉤子函數(shù)。

1. 生命周期核心階段：掛載流程

掛載階段是組件從初始化到渲染到頁面的核心過程，開發(fā)中最常用，執(zhí)行順序固定：beforeCreate → created → beforeMount → mounted，僅執(zhí)行一次。

export default {
  data() {
    return {
      message: '生命周期演示',
      list: []
    }
  },
  beforeCreate() {
    console.log('beforeCreate：data/props 未初始化，無法訪問')
  },
  created() {
    console.log('created：data/props 已初始化，可訪問', this.message)
    this.getList() // 發(fā)送初始化數(shù)據(jù)請求（無需依賴DOM）
  },
  beforeMount() {
    console.log('beforeMount：模板編譯完成，即將掛載到DOM')
  },
  mounted() {
    console.log('mounted：DOM已掛載，可操作', this.$el)
  },
  methods: {
    // 模擬數(shù)據(jù)請求
    getList() {
      setTimeout(() => {
        this.list = ['Vue', '自定義指令', '生命周期']
      }, 500)
    }
  }
}

1. beforeCreate：實例剛創(chuàng)建，無數(shù)據(jù)、無 DOM，幾乎不用；
2. created：數(shù)據(jù)就緒，可訪問 data/props，適合初始化數(shù)據(jù)、發(fā)送無 DOM 依賴的請求；
3. beforeMount：模板編譯完成，未掛載 DOM，可做最后一次數(shù)據(jù)修改；
4. mounted：DOM 就緒，可訪問 / 操作 DOM，適合初始化第三方插件、執(zhí)行 DOM 相關(guān)邏輯。

2. 生命周期核心階段：更新 + 銷毀流程

更新階段會隨數(shù)據(jù)變化多次觸發(fā)，銷毀階段僅執(zhí)行一次，核心是清理資源，避免內(nèi)存泄漏。

export default {
  data() {
    return {
      message: '初始數(shù)據(jù)',
      timer: null
    }
  },
  created() {
    // 初始化定時器
    this.timer = setInterval(() => {
      console.log('定時器運行中')
    }, 1000)
  },
  // 更新階段：數(shù)據(jù)變化，視圖未更新時執(zhí)行
  beforeUpdate() {
    console.log('beforeUpdate：數(shù)據(jù)已改，視圖未更')
  },
  // 更新階段：數(shù)據(jù)變化，視圖更新完成后執(zhí)行
  updated() {
    console.log('updated：數(shù)據(jù)已改，視圖已更', this.message)
  },
  // 銷毀階段：組件即將卸載，實例仍可訪問（核心：清理資源）
  beforeDestroy() {
    console.log('beforeDestroy：組件即將銷毀，清理資源')
    clearInterval(this.timer) // 清除定時器
    this.$el = null // 釋放DOM引用
  },
  // 銷毀階段：組件已卸載，數(shù)據(jù)/DOM均不可訪問
  destroyed() {
    console.log('destroyed：組件已銷毀，無法操作')
  },
  methods: {
    // 修改數(shù)據(jù)，觸發(fā)更新階段
    updateMsg() {
      this.message = '修改后的新數(shù)據(jù)'
    }
  }
}

3. 生命周期核心總結(jié)

整體執(zhí)行順序

創(chuàng)建階段→ 掛載階段→ 更新階段→ 銷毀階段

核心開發(fā)原則

• 數(shù)據(jù)相關(guān)邏輯（請求、初始化）放 created，DOM 相關(guān)邏輯放 mounted；
• 數(shù)據(jù)更新后需操作 DOM，優(yōu)先用 this.$nextTick，而非 updated；
• 組件銷毀前，必須在 beforeDestroy 中清理所有資源（定時器、事件、插件實例）；

總結(jié)

自定義指令和生命周期是 Vue 開發(fā)的基礎(chǔ)中的基礎(chǔ)，也是進(jìn)階的關(guān)鍵：

• 自定義指令：讓 DOM 操作更高效、更復(fù)用，核心是按需選擇函數(shù)式 / 對象式，做好資源清理；
• 生命周期：讓組件行為更可控，核心是分清數(shù)據(jù)就緒和 DOM 就緒時機，牢記銷毀階段清理資源。

到此這篇關(guān)于Vue 教程 自定義指令 + 生命周期全解析的文章就介紹到這了,更多相關(guān)vue自定義指令 生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論