全棧開發一條龍——前端篇
第一篇：框架確定、ide設置與項目創建
第二篇：介紹項目文件意義、組件結構與導入以及setup的引入。
第三篇：setup語法，設置響應式數據。
第四篇：數據綁定、計算屬性和watch監視
第五篇 : 組件間通信及知識補充

輔助文檔：HTML標簽大全（實時更新）

本篇將講述生命周期和自定義hooks，非常重要，請務必搞懂

一、生命周期（函數）

組件的生命周期就是組件創建(created)、掛載(mounted)、更新(update)和銷毀的過程，我們可以通過調用生命周期函數，在這些過程前后進行操作。

二、Vue2的生命周期

我們之所以要講Vue2，是因為Vue2與Vue3有相通之處但也有不同的地方，而有些項目是用Vue2寫的，為了防止理解出現障礙，故先說Vue2的生命周期。

1.創建前/創建完畢

在創建階段，有兩個生命周期函數：創建前函數和創建后函數。分別為beforeCreate 和 created


在組件創建前后，會自動執行你寫在其中的函數（你可以將各個生命周期函數的順序打亂，不影響Vue自動在對應事件時調用函數）。

2.掛載前/掛載完畢

我們用beforeMount和mounted來寫掛載的生命周期函數。
所謂掛載，就是你寫的內容出現在html頁面上的過程。我們，可以用debugger;（斷點測試）來更好的理解這個過程。


頁面直接為空了，說明未能掛載成功。

3.更新前/更新完畢

我們用 beforeUpdate 和 updated來調用。

比如有一個按鈕，你點擊以下counter就加1.
在你不點擊的時候，before和uodated都不會調用。當你點擊之后，會先調用before，更改完之后，會調用updated。

4.銷毀前/銷毀后

我們用beforeDestroy和destroyed來調用
某個組件如果有存在條件，則在條件不滿足的時候會被銷毀，就會進入銷毀這個生命周期。

三、Vue3的生命周期

1.創建

Vue3直接用setup模擬create過程了，沒有before和created的區分了。

2.掛載

你先要引入onBeforeMount。
import {onBeforeMount} from vue'
再調用時，我們要這個函數中加入一個回調函數，這個回調函數就是在掛載時調用的。

onBeforeMount( ()=>{  } )

同理有掛載完畢時調用的為onMounted

3.更新

用法與掛載一致。請先引入onBeforeUpdate 和onUpdated，然后在其中加入回調函數屬性。

4.卸載（即Vue2的銷毀）

同理，函數名為onBeforeUnmount 和 onUnmounted’

5.嵌套組件的生命周期

在父子組件中，子的優先于父的。

假設圖片中為父組件調用子組件的案例，Vue會先創建掛載完person中的所有內容，才會回到父組件繼續加載。所以子組件優先于父組件加載。

生命周期總結

比較常用的有
1.掛載完畢 : onMounted
2.更新完畢 : onUpdated
3.卸載之前 : onBeforeUnmount

四、自定義hooks

想要運行這個例子，請先安裝npm i axios（在終端運行）
由于筆者喜歡邊牧，下面的例子以隨機獲取一只邊牧為例。

<template><div class = "style_test">    <button @click="add_border_collie">添加一只邊牧！</button>   <hr><img v-for="(bc,index) in border_collie" :src="bc" :key="index" class="sizee"></div><div class = "style_test">   <button @click="add_dog">隨機添加一只狗</button>   <hr><img v-for="(bc,index) in dog" :src="bc" :key="index" class="sizee"></div>
</template><script lang="ts">export default {name : 'Test'//組件名}
</script><script lang="ts" setup>import {reactive, ref} from 'vue'import axios from 'axios';let border_collie=reactive([])let dog=reactive([])async function add_border_collie(){try{let result=await axios.get('https://dog.ceo/api/breed/collie/border/images/random')border_collie.push(result.data.message)} catch(error){alert(error)}}async function add_dog(){try{let result=await axios.get('https://dog.ceo/api/breeds/image/random')dog.push(result.data.message)} catch(error){alert(error)}}</script><style scoped>.style_test{background-color: rgb(208, 223, 40);box-shadow: 0 0 10px;border-radius:10px;  padding: 20px;}.sizee{height: 150px;margin-right: 10px;}
</style>

為了照顧不喜歡邊牧的人，我們又添加了一個隨機添加狗狗。這就導致代碼一大坨，不好維護，而且事實上，這與vue2也沒什么區別。
那么接下來我們就要說到自定義hook(前端的模塊化編程)。
我們現在src文件夾下建立hooks文件，然后在這個文件夾中新建一個.ts文件。

把一個模塊需要用的所有內容寫進去，然后return一個外部可以調用的接口即可。比如這里我把獲取邊牧圖片的模塊放了進去

import {reactive, ref} from 'vue'
import axios from 'axios';export default function (){let border_collie=reactive([])async function add_border_collie(){try{let result=await axios.get('https://dog.ceo/api/breed/collie/border/images/random')border_collie.push(result.data.message)} catch(error){alert(error)}        }return {border_collie,add_border_collie}
}

之后，在父親組件中，我們需要引入，引入使用就行了。

import get_bc from '@/hooks/get_bc';const {border_collie,add_border_collie} = get_bc()

功能完全不變。這就給我們提供了一個可以封裝的寫法，防止主組件過于亂，方便維護，方便結對編程。
hooks是Vue3組合式API的真諦