Vue activated和deactivated生命周期鉤子在keep-alive中的作用

在Vue里，keep-alive 組件就像是一個(gè)“記憶寶盒”，它能把組件的狀態(tài)保存起來(lái)，避免組件在切換時(shí)反復(fù)創(chuàng)建和銷毀，這樣可以大大提升性能。而 activated 和 deactivated 這兩個(gè)生命周期鉤子，就像是“記憶寶盒”的開關(guān)助手，在組件進(jìn)入和離開這個(gè)“寶盒”時(shí)發(fā)揮著重要作用。

1.activated生命周期鉤子

當(dāng)使用 keep-alive 包裹的組件被激活（也就是重新顯示在頁(yè)面上）時(shí)，activated 鉤子就會(huì)被觸發(fā)。這就好比一個(gè)人從沉睡中被喚醒，要開始干活了。下面是一個(gè)簡(jiǎn)單的例子：

<template>
  <!-- 這是組件的模板部分 -->
  <div>
    <h1>這是一個(gè)被 keep-alive 包裹的組件</h1>
  </div>
</template>

<script>
export default {
  // 組件被激活時(shí)觸發(fā)的鉤子函數(shù)
  activated() {
    // 這里可以寫一些組件被激活時(shí)要執(zhí)行的代碼，比如重新獲取數(shù)據(jù)
    console.log('組件被激活啦！');
    // 可以在這里發(fā)送請(qǐng)求獲取最新的數(shù)據(jù)
    // this.fetchData(); 
  },
  methods: {
    // 模擬獲取數(shù)據(jù)的方法
    fetchData() {
      console.log('正在獲取數(shù)據(jù)...');
    }
  }
}
</script>

在這個(gè)例子中，當(dāng)這個(gè)組件被激活時(shí)，控制臺(tái)就會(huì)輸出“組件被激活啦！”，你還可以在 activated 鉤子中調(diào)用 fetchData 方法去重新獲取最新的數(shù)據(jù)。

2.deactivated生命周期鉤子

當(dāng)使用 keep-alive 包裹的組件被停用（也就是從頁(yè)面上隱藏）時(shí)，deactivated 鉤子就會(huì)被觸發(fā)。這就好比一個(gè)人要去休息了，得把手上的活先停下來(lái)。下面是對(duì)應(yīng)的例子：

<template>
  <!-- 這是組件的模板部分 -->
  <div>
    <h1>這是一個(gè)被 keep-alive 包裹的組件</h1>
  </div>
</template>

<script>
export default {
  // 組件被停用（隱藏）時(shí)觸發(fā)的鉤子函數(shù)
  deactivated() {
    // 這里可以寫一些組件被停用時(shí)要執(zhí)行的代碼，比如停止定時(shí)器
    console.log('組件被停用啦！');
    // 可以在這里清除定時(shí)器
    // clearInterval(this.timer); 
  },
  data() {
    return {
      // 模擬一個(gè)定時(shí)器
      timer: null
    };
  },
  mounted() {
    // 在組件掛載時(shí)啟動(dòng)定時(shí)器
    this.timer = setInterval(() => {
      console.log('定時(shí)器在運(yùn)行...');
    }, 1000);
  }
}
</script>

在這個(gè)例子中，當(dāng)組件被停用（隱藏）時(shí)，控制臺(tái)會(huì)輸出“組件被停用啦！”，你還可以在 deactivated 鉤子中清除定時(shí)器，避免不必要的資源浪費(fèi)。

3. 結(jié)合keep-alive使用的完整示例

下面是一個(gè)完整的示例，展示了如何在 keep-alive 中使用 activated 和 deactivated 鉤子：

<template>
  <div>
    <!-- 這里使用 keep-alive 包裹組件 -->
    <keep-alive>
      <!-- 通過 v-if 控制組件的顯示和隱藏 -->
      <component-a v-if="showComponentA"></component-a>
      <component-b v-else></component-b>
    </keep-alive>
    <!-- 切換組件的按鈕 -->
    <button @click="toggleComponent">切換組件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      // 控制組件 A 是否顯示
      showComponentA: true
    };
  },
  methods: {
    // 切換組件的方法
    toggleComponent() {
      this.showComponentA = !this.showComponentA;
    }
  }
}
</script>

在 ComponentA.vue 和 ComponentB.vue 中，你可以分別定義 activated 和 deactivated 鉤子，來(lái)處理組件激活和停用的邏輯。

總結(jié)一下，activated 和 deactivated 這兩個(gè)生命周期鉤子在 keep-alive 組件中非常有用，它們能讓你在組件進(jìn)入和離開“記憶寶盒”時(shí)，靈活地執(zhí)行一些必要的操作，提升應(yīng)用的性能和用戶體驗(yàn)。

解釋一下Vue中created和mounted生命周期鉤子函數(shù)的作用

在Vue.js里，生命周期鉤子函數(shù)就像是一場(chǎng)戲劇中的各個(gè)關(guān)鍵場(chǎng)次，每個(gè)鉤子都有其獨(dú)特的作用，在特定的時(shí)間點(diǎn)被觸發(fā)。

created 和 mounted 這兩個(gè)生命周期鉤子函數(shù)在Vue組件的生命周期中扮演著重要角色，下面來(lái)詳細(xì)解釋它們的作用。

1.created生命周期鉤子函數(shù)

created 鉤子函數(shù)會(huì)在Vue實(shí)例已經(jīng)創(chuàng)建完成之后被立即調(diào)用。在這個(gè)階段，實(shí)例已經(jīng)完成了數(shù)據(jù)觀測(cè)、property 和 method 的計(jì)算、watch/event 事件回調(diào)的配置等。然而，掛載階段還沒有開始，$el 屬性目前不可用。

可以把 created 階段想象成戲劇的籌備階段，演員（數(shù)據(jù)和方法）都已經(jīng)就位，但舞臺(tái)（DOM）還沒搭建好。這個(gè)階段適合進(jìn)行一些數(shù)據(jù)的初始化操作，比如發(fā)送HTTP請(qǐng)求來(lái)獲取數(shù)據(jù)。

以下是一個(gè)簡(jiǎn)單的示例：

<template>
  <div>
    <!-- 這里展示從接口獲取的數(shù)據(jù) -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定義一個(gè)變量來(lái)存儲(chǔ)從接口獲取的數(shù)據(jù)
      message: ''
    };
  },
  created() {
    // 在 created 鉤子中發(fā)送請(qǐng)求獲取數(shù)據(jù)
    console.log('組件已創(chuàng)建，開始獲取數(shù)據(jù)...');
    // 模擬一個(gè)異步請(qǐng)求
    setTimeout(() => {
      this.message = '這是從接口獲取的數(shù)據(jù)';
    }, 1000);
  }
};
</script>

在這個(gè)例子中，created 鉤子函數(shù)被觸發(fā)后，會(huì)模擬一個(gè)異步請(qǐng)求去獲取數(shù)據(jù)，并將數(shù)據(jù)賦值給 message 變量。由于這個(gè)階段數(shù)據(jù)觀測(cè)已經(jīng)完成，當(dāng)數(shù)據(jù)更新時(shí)，Vue會(huì)自動(dòng)更新DOM。

2.mounted生命周期鉤子函數(shù)

mounted 鉤子函數(shù)在掛載完成后被調(diào)用，也就是Vue實(shí)例已經(jīng)將其模板渲染成真實(shí)的DOM并插入到頁(yè)面中。此時(shí)，$el 屬性已經(jīng)可用，可以直接訪問DOM元素。

可以把 mounted 階段想象成戲劇正式開演，舞臺(tái)（DOM）已經(jīng)搭建好，演員（數(shù)據(jù)和方法）可以在上面盡情表演了。這個(gè)階段適合進(jìn)行一些需要操作DOM的初始化工作，比如初始化第三方插件。

以下是一個(gè)示例：

<template>
  <div>
    <!-- 這里有一個(gè)需要初始化的 DOM 元素 -->
    <div id="my-element">這是一個(gè)需要初始化的元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在 mounted 鉤子中操作 DOM
    console.log('組件已掛載，開始操作 DOM...');
    const element = document.getElementById('my-element');
    // 修改 DOM 元素的樣式
    element.style.color = 'red';
  }
};
</script>

在這個(gè)例子中，mounted 鉤子函數(shù)被觸發(fā)后，會(huì)獲取 id 為 my-element 的DOM元素，并將其文字顏色修改為紅色。因?yàn)樵谶@個(gè)階段，DOM已經(jīng)渲染完成，所以可以安全地進(jìn)行DOM操作。

3.created和mounted的區(qū)別和使用場(chǎng)景總結(jié)

區(qū)別：

• created 階段主要是數(shù)據(jù)的初始化，此時(shí)DOM還未渲染，不能進(jìn)行DOM操作。
• mounted 階段DOM已經(jīng)渲染完成，可以進(jìn)行DOM操作。

使用場(chǎng)景：

• created 適合進(jìn)行數(shù)據(jù)的初始化，如發(fā)送HTTP請(qǐng)求獲取數(shù)據(jù)、初始化全局變量等。
• mounted 適合進(jìn)行需要操作DOM的初始化工作，如初始化第三方插件、綁定事件監(jiān)聽器等。

通過合理使用 created 和 mounted 生命周期鉤子函數(shù)，可以更好地控制組件的初始化過程，提升應(yīng)用的性能和用戶體驗(yàn)。

Vue中還有哪些常用的生命周期鉤子函數(shù)？

除了 created 和 mounted，Vue里還有不少常用的生命周期鉤子函數(shù)，它們?cè)诮M件生命周期的不同階段發(fā)揮作用。下面為你詳細(xì)介紹：

1.beforeCreate

• 觸發(fā)時(shí)機(jī)：在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和 event/watcher 事件配置之前被調(diào)用。
• 作用：這個(gè)階段組件實(shí)例剛剛被創(chuàng)建，數(shù)據(jù)和方法都還沒初始化，一般用途較少。不過你可以在此處添加一些全局的初始化邏輯。

示例代碼：

<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('組件實(shí)例剛開始創(chuàng)建，數(shù)據(jù)和方法都未初始化');
  }
};
</script>

2.beforeMount

• 觸發(fā)時(shí)機(jī)：在掛載開始之前被調(diào)用，此時(shí)模板編譯/掛載已經(jīng)完成，但還未將編譯好的DOM插入到頁(yè)面中。
• 作用：可以在這個(gè)階段對(duì)模板數(shù)據(jù)進(jìn)行最后的修改，不過由于DOM還未插入，所以不能進(jìn)行DOM操作。

示例代碼：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  beforeMount() {
    console.log('模板編譯完成，DOM 還未插入');
    this.message = '修改后的消息';
  }
};
</script>

3.beforeUpdate

• 觸發(fā)時(shí)機(jī)：在數(shù)據(jù)更新時(shí)，DOM 重新渲染和打補(bǔ)丁之前被調(diào)用。
• 作用：當(dāng)組件的數(shù)據(jù)發(fā)生變化，在DOM更新之前觸發(fā)該鉤子，你可以在這個(gè)階段獲取更新前的數(shù)據(jù)狀態(tài)，進(jìn)行一些數(shù)據(jù)處理操作。

示例代碼：

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '新消息';
    }
  },
  beforeUpdate() {
    console.log('數(shù)據(jù)已更新，DOM 即將更新');
  }
};
</script>

4.updated

• 觸發(fā)時(shí)機(jī)：在數(shù)據(jù)更改導(dǎo)致的DOM更新完成之后被調(diào)用。
• 作用：當(dāng)數(shù)據(jù)更新且DOM重新渲染完成后觸發(fā)該鉤子，你可以在這個(gè)階段進(jìn)行一些依賴于更新后DOM的操作，比如獲取更新后的DOM元素尺寸。

示例代碼：

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
    <p ref="messageRef">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '新消息';
    }
  },
  updated() {
    console.log('DOM 已更新');
    console.log('更新后的 DOM 元素內(nèi)容:', this.$refs.messageRef.textContent);
  }
};
</script>

5.beforeDestroy（Vue 2）/beforeUnmount（Vue 3）

• 觸發(fā)時(shí)機(jī)：在實(shí)例銷毀（Vue 2）或卸載（Vue 3）之前被調(diào)用。此時(shí)實(shí)例仍然完全可用。
• 作用：可以在這個(gè)階段進(jìn)行一些清理工作，比如清除定時(shí)器、取消事件監(jiān)聽等，避免內(nèi)存泄漏。

示例代碼（Vue 3）：

<template>
  <div></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

let timer;
onMounted(() => {
  timer = setInterval(() => {
    console.log('定時(shí)器在運(yùn)行');
  }, 1000);
});

onBeforeUnmount(() => {
  console.log('組件即將卸載，清除定時(shí)器');
  clearInterval(timer);
});
</script>

6.destroyed（Vue 2）/unmounted（Vue 3）

• 觸發(fā)時(shí)機(jī)：在實(shí)例銷毀（Vue 2）或卸載（Vue 3）之后被調(diào)用。此時(shí)所有的事件監(jiān)聽器和子實(shí)例都已經(jīng)被銷毀。
• 作用：一般用于確認(rèn)組件已經(jīng)完全銷毀，進(jìn)行一些最終的清理操作。

示例代碼（Vue 3）：

<template>
  <div></div>
</template>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('組件已卸載');
});
</script>

這些生命周期鉤子函數(shù)能幫助你在組件的不同階段執(zhí)行特定的操作，從而更好地控制組件的行為和狀態(tài)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論