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

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

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

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

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

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

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

2. 對(duì)象式自定義指令

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

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

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

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

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

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

關(guān)鍵注意事項(xiàng)

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

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

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

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

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

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

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

2. 生命周期核心階段：更新 + 銷(xiāo)毀流程

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

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

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

整體執(zhí)行順序

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

核心開(kāi)發(fā)原則

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

總結(jié)

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

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

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

最新評(píng)論