VUE3（十）生命周期及鈎子函數

一：什么是生命周期

Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。

在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊js方法，可以讓我們用自己注冊的js方法控制整個大局，在這些事件響應方法中的this直接指向的是vue的實例。

二：上圖，對生命周期圖的標注

特別值得注意的是created鈎子函數和mounted鈎子函數的區別

三：生命周期鈎子函數觸發時間

1：beforeCreate

在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

2：created

實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

3：beforeMount

在掛載開始之前被調用：相關的 render 函數首次被調用。

4：mounted

el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。

5：beforeUpdate

數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。

6：updated

由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。

當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。

該鈎子在服務器端渲染期間不被調用。

7：beforeDestroy

實例銷毀之前調用。在這一步，實例仍然完全可用。

8：destroyed

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鈎子在服務器端渲染期間不被調用。

四：VUE3.0中的生命周期函數

1：Vue3.x 生命周期在調用前需要先進行引入,我們先暫時演示前五個生命周期。

import {
    ref,
    reactive,
    toRefs,
    onBeforeMount,// 在組件掛載之前執行的函數
    onMounted,
    onBeforeUpdate,// 在組件修改之前執行的函數
    onUpdated,
    onBeforeUnmount,// 在組件卸載之前執行的函數
    onUnmounted
} from "vue";

2：setup函數的生命周期

setup 這個函數是在beforeCreate和created之前運行的,所以你可以用它來代替這兩個鈎子函數。

為了看出鈎子函數執行的時機，我在setup()函數里，編寫了下面的代碼：

我這里仍然使用上一部分中的helloworld.vue文件做修改測試：

helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <!-- 模板語法需要使用data.屬性來調用（單獨使用reactive函數） -->
  <!-- <button @click="count++">count is: {{ data.count }}</button> -->
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">點我彈窗</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive,
    toRefs,
    onBeforeMount,// 在組件掛載之前執行的函數
    onMounted,
    onBeforeUpdate,// 在組件修改之前執行的函數
    onUpdated,
    onBeforeUnmount,// 在組件卸載之前執行的函數
    onUnmounted
} from "vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 使用setup 代替 data
  // 因為我這里使用的是typescript，因此需要給參數指定類型
  setup(props:any,context:any){
    console.log("1-開始創建組件-----setup()");
    // ref 定義響應式數據
    // let count = ref(0); 
 
    // reactive 創建響應式對象
    let data = reactive({
      // 定義響應式數據
      count:0,
    });
    
    const clickMe = () => {
      // 使用ref關鍵字綁定的變量，賦值 的時候必須使用.value
      // count.value++;
      // 調用reactive 定義對象的參數的時候需要使用對象.來調用
      data.count++;
      alert('hi');
    }
 
    onBeforeMount(() => {
      console.log("2-組件掛載到頁面之前執行-----onBeforeMount()");
    });
 
    onMounted(() => {
      console.log("3-組件掛載到頁面之后執行-----onMounted()");
    });
    onBeforeUpdate(() => {
      console.log("4-組件更新之前-----onBeforeUpdate()");
    });
 
    onUpdated(() => {
      console.log("5-組件更新之后-----onUpdated()");
    });
 
    // 使用toRefs函數對data對象進行包裝，確保使用擴展運算符進行解構之后，仍具有響應式
    let param = toRefs(data);
    return {
      // data,
      ...param,
      clickMe
    }
  },
}
</script>

最終代碼實現效果如下圖所示：

當然，VUE3.0中對VUE2.0的寫法是完全兼容的，你也可以在setup之外寫VUE2.0的生命周期函數。

beforeCreate() {
  console.log("1-組件創建之前-----beforeCreate()");
},
beforeMount() {
  console.log("2-組件掛載到頁面之前執行-----BeforeMount()");
},
mounted() {
  console.log("3-組件掛載到頁面之后執行-----Mounted()");
},
beforeUpdate() {
  console.log("4-組件更新之前-----BeforeUpdate()");
},
updated() {
  console.log("5-組件更新之后-----Updated()");
},

五：VUE3與VUE2生命周期的對比

到底使用Vue2.x還是Vue3.x的生命周期鈎子函數？其實這個無所謂，但是切記不要混用，如果你用 setup 這種Vue3的生命周期函數，就不要再使用Vue2的了。為了你更好的掌握，我作了一個函數對比：

Vue2--------------vue3

beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

通過這樣對比，可以很容易的看出 vue3 的鈎子函數基本是再 vue2 的基礎上加了一個on,但也有兩個鈎子函數發生了變化。

BeforeDestroy變成了onBeforeUnmount

destroyed變成了onUnmounted

尤大神的介紹是mount比Destroy更形象，也和beforeMount相對應。

生命周期的基本知識就到這里了，內容稍多。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：