Vue.js的生命周期鉤子

Vue.js，這個(gè)前端舞臺(tái)上的明星框架，以其優(yōu)雅的API和響應(yīng)式的數(shù)據(jù)綁定機(jī)制，讓開發(fā)者愛不釋手。在這光鮮亮麗的背后，有一群默默無聞的“幕后英雄”——生命周期鉤子，它們?cè)诮M件的各個(gè)階段辛勤工作，確保組件的初始化、更新、銷毀等一系列過程井然有序。本文將為你揭秘Vue.js生命周期鉤子的臺(tái)前幕后，通過實(shí)戰(zhàn)案例，帶你領(lǐng)略它們的風(fēng)采。

生命周期概覽

Vue的生命周期分為創(chuàng)建、運(yùn)行和銷毀三個(gè)主要階段，每個(gè)階段包含多個(gè)鉤子函數(shù)，它們按照預(yù)定順序被調(diào)用，構(gòu)成了Vue組件的生命歷程。

創(chuàng)建階段

beforeCreate: 組件實(shí)例剛被創(chuàng)建，屬性計(jì)算和觀察數(shù)據(jù)事件配置之前。
created: 屬性已綁定，但DOM還未生成，適合進(jìn)行初始化設(shè)置。
beforeMount: 模板編譯完成，虛擬DOM已創(chuàng)建，但尚未掛載。
mounted: 組件已掛載到DOM，此時(shí)可以訪問DOM元素。

更新階段

beforeUpdate: 數(shù)據(jù)更新，虛擬DOM重新渲染之前。
updated: 數(shù)據(jù)更新導(dǎo)致的DOM變動(dòng)已完成。

銷毀階段

beforeUnmount: 組件即將卸載，可以在此執(zhí)行清理操作。
unmounted: 組件已從DOM中移除，解綁事件和清理工作完成。

實(shí)戰(zhàn)演練

案例一：數(shù)據(jù)初始化與DOM操作

<template>
  <div ref="welcome">Vue says hello!</div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate: 我剛被創(chuàng)建，什么都沒有。');
  },
  created() {
    console.log('created: 數(shù)據(jù)已綁定，可以在這里設(shè)置初始狀態(tài)。');
  },
  mounted() {
    console.log('mounted: DOM已準(zhǔn)備好，可以操作DOM了。');
    this.$refs.welcome.style.color = 'blue';
  }
};
</script>

案例二：性能優(yōu)化與防抖

export default {
  updated() {
    console.log('updated: 數(shù)據(jù)更新，DOM也跟著變了。');
    // 防止頻繁更新導(dǎo)致的性能問題
    this.debouncedUpdate = debounce(this.actualUpdateFn, 300);
    this.debouncedUpdate();
  },
  methods: {
    actualUpdateFn() {
      // 這里執(zhí)行真正的DOM更新操作
      console.log('真實(shí)執(zhí)行DOM更新');
    }
  }
};

案例三：資源清理與內(nèi)存管理

export default {
  beforeUnmount() {
    console.log('beforeUnmount: 即將離開，做些清理工作吧。');
    window.removeEventListener('resize', this.handleResize);
  },
  unmounted() {
    console.log('unmounted: 再見了，我已不在DOM中。');
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 處理窗口大小變化邏輯
    }
  }
};