vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (三) 生命週期函數

vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (三) 生命週期函數

通過前面兩講，我相信大家對於 vue 3.0 雙向綁定數據，已經有了一些瞭解了。但是，對於生命週期函數，還是一臉懵逼的。

這一講，我們來講解生命週期函數。

vue 2.0 生命週期對比 3.0 生命週期

2.0 週期名稱	3.0 週期名稱	說明
beforeCreate	setup	組件創建之前
created	setup	組件創建完成
beforeMount	onBeforeMount	組件掛載之前
mounted	onMounted	組件掛載完成
beforeUpdate	onBeforeUpdate	數據更新，虛擬 DOM 打補丁之前
updated	onUpdated	數據更新，虛擬 DOM 渲染完成
beforeDestroy	onBeforeUnmount	組件銷燬之前
destroyed	onUnmounted	組件銷燬後

通過上表對比，我們可以看到，原有的生命週期，基本都是存在的。並且新的明明，更加直觀，通過 on 前綴，可以直觀的看到，這是一個生命週期函數。

生命週期是如何使用的呢？上代碼！

我們在我們項目中，創建一個文件 src\views\Life.vue， 並在路由中掛載該組件。

# 進入項目文件夾
cd ~/Sites/myWork/demo/vue3-demo
# 創建新組件文件
touch src/views/Life.vue

src/router/index.js

// ...
{
  path: '/life',
  component: () => import('@/views/Life.vue')
}
// ...

後續章節，我就不寫上面的代碼了。大家應該都知道了。

編寫 srv/views/Life.vue 內容

<template>
  <router-link to="/">點這裏去首頁</router-link>
  <hr>
  <div class="home">
    這裏是一個計數器 >>> <span class="red">{{count}}</span> <br>
    <button @click="countAdd">點擊加數字</button>
  </div>
</template>
<script>
// 你需要使用到什麼生命週期，就引出來什麼生命週期
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

export default {
  // setup 函數，就相當於 vue 2.0 中的 created
  setup () {
    const count = ref(0)
    // 其他的生命週期都寫在這裏
    onBeforeMount (() => {
      count.value++
      console.log('onBeforeMount', count.value)
    })
    onMounted (() => {
      count.value++
      console.log('onMounted', count.value)
    })
    // 注意，onBeforeUpdate 和 onUpdated 裏面不要修改值，會死循環的哦！
    onBeforeUpdate (() => {
      console.log('onBeforeUpdate', count.value)
    })
    onUpdated (() => {
      console.log('onUpdated', count.value)
    })
    onBeforeUnmount (() => {
      count.value++
      console.log('onBeforeUnmount', count.value)
    })
    onUnmounted (() => {
      count.value++
      console.log('onUnmounted', count.value)
    })
    // 定義一個函數，修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    return {
      count,
      countAdd
    }
  }
}
</script>

看結果

我們在瀏覽器中進入頁面，並且點擊兩下按鈕，然後回到首頁，可以在控制檯中看到完整的生命週期的輸出，如下圖所示：

劃重點

首先，在 vue 3.0 中，生命週期是從 vue 中導出的，我們需要用到哪些，就導出哪些。

可能不少看官會認爲多次一舉，但實則不然。vue 提供這麼多的生命週期，有幾個是我們常用的？在大多數的組件中，我們用不到生命週期。即便是頁面級別的應用，可能用到最多的是 onMounted 即可。

當然，那些綁定時間的操作會用到解綁，因此會用到 onUnmounted。其它的生命週期，正常情況下是基本用不到的。所以，通過引入使用的這種設定，可以減少我們的最終編譯的項目的體積。而且，這樣的引入使用，更加的邏輯清晰。

其次，除 setup 之外，其他的生命週期函數，都是在 setup 裏面直接書寫函數即可。

好的，生命週期我相信已經講解清楚了。下一講，我們來討論計算屬性。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！