經(jīng)過(guò)上一式的學(xué)習(xí)，我相信大家已經(jīng)會(huì)創(chuàng)建一個(gè)vite項(xiàng)目了，并且知道如何運(yùn)行，如何打包，如何查看打包的內(nèi)容，那么本章節(jié)會(huì)教給大家第二式。
一點(diǎn)點(diǎn)的小提醒
插件風(fēng)云
有些童鞋們可能之前插件用的是Vetur（這個(gè)適合vue）,那么運(yùn)行vue3+ts的項(xiàng)目的時(shí)候可能會(huì)存在一點(diǎn)小報(bào)錯(cuò)，這里建議大家禁用Vetur，使用Volar。
關(guān)于引入模塊報(bào)錯(cuò)
main.js發(fā)現(xiàn)引入了app.vue會(huì)報(bào)錯(cuò)的。這里我建議你在根目錄新建一個(gè)env.d.ts文件，關(guān)于報(bào)錯(cuò)的原因，網(wǎng)上統(tǒng)一的解釋就是ts無(wú)法識(shí)別出了ts文件的vue文件。
解決方案：
// <reference types="vite/client" />
// vue3 報(bào)錯(cuò)提示 找不到模塊“./XXX.vue”或其相應(yīng)的類型聲明
// 報(bào)錯(cuò)原因：typescript 只能理解 .ts 文件，無(wú)法理解 .vue文件
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
vue3生命周期
什么是生命周期
在 Vue 中的每個(gè)組件都會(huì)經(jīng)歷從創(chuàng)建到掛載到更新再到銷毀這幾個(gè)階段，而在這些階段中，Vue 會(huì)運(yùn)行一種叫做生命周期鉤子的函數(shù)，方便我們?cè)谔囟ǖ碾A段有機(jī)會(huì)添加上我們自己的代碼。
生命周期有哪些階段
Vue 生命周期總共可以分為 8 各階段：創(chuàng)建前后、掛載前后、更新前后、銷毀前后，以及一些特殊場(chǎng)景的生命周期（keep-alive 激活時(shí)(activated)未激活時(shí)(deactivated)、捕獲后代組件錯(cuò)誤時(shí)(errorCaptured)）。Vue3 中還新增了三個(gè),用于調(diào)試和服務(wù)端渲染場(chǎng)景。
僅在開發(fā)模式下使用
onRenderTracked()
onRenderTriggered()
服務(wù)端渲染
onServerPrefetch()只在服務(wù)端渲染中執(zhí)行
Vue生命周期的流程
vue2的生命周期，我相信大家已經(jīng)都記得非常清楚了，在 Vue3 中的變化 絕大多數(shù)只要加上前綴 on 即可，比如 mounted 變?yōu)?onMounted，除了 beforeDestroy 和 destroyed 被重新命名為 beforeUnmount 和 unMounted
全部的生命周期，我這里也就不多寫了，唯一還要提醒的是，setup 是比 created 先執(zhí)行的； 而且沒(méi)有 beforeCreate 和 created。那么這個(gè)setup實(shí)際上就是data和methods。而這些生命周期分別用來(lái)干些什么，和vue2并無(wú)明顯的差別。
生命周期演示過(guò)程
<template>
<div>這是第一個(gè)組件</div>
</template>
<script lang="ts">
import { defineComponent,onBeforeMount,onMounted } from 'vue';
export default defineComponent({
setup(){
console.log('什么時(shí)候執(zhí)行')
onBeforeMount(()=>{
console.log('執(zhí)行了onBeforeMount')
})
onMounted(()=>{
console.log('執(zhí)行了onMounted')
})
}
})
</script>
<style>
</style>
解析：其實(shí)大家不難看出來(lái)，上面代碼的寫法和平時(shí)寫vue2是的寫法有哪里不一樣。第一點(diǎn)就是script標(biāo)簽里面加上了ts，那這里有一些熟悉vue3+ts的可能會(huì)說(shuō)，上面的寫法為什么不加上setup（ps:這里我暫時(shí)不用語(yǔ)法糖去寫，方便大家最早的知道初始的寫法）。第二點(diǎn)，我們想使用一些函數(shù)，這里是生命周期，都需要引入一下。第三點(diǎn)，就是非常顯眼的setup函數(shù)了。
上述代碼運(yùn)行的結(jié)果就是：setup>onBeforeMount>onMounted
兩百斤反骨
你以為真的不會(huì)寫完整生命周期嗎，那你就錯(cuò)了，都寫到這了，不給個(gè)小贊贊么。
1、setup(): 開始創(chuàng)建組件之前，在 beforeCreate 和 created 之前執(zhí)行，創(chuàng)建的是 data 和 method
2、onBeforeMount() : 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù),可以檢查dom是否被正確渲染，也可以定義一些dom操作，比如給某個(gè)元素設(shè)置屬性，添加一些事件等
3、onMounted(): 組件掛載完成后執(zhí)行的函數(shù),組件掛載時(shí)調(diào)用 可以訪問(wèn)數(shù)據(jù)、dom 元素、子組件等
4、onBeforeUpdate(): 組件更新之前執(zhí)行的函數(shù),更新前調(diào)用 此時(shí) view 層還未更新，可用于獲取更新前的各種狀態(tài)
5、onUpdated(): 組件更新完成之后執(zhí)行的函數(shù),完成更新時(shí)調(diào)用 此時(shí)view層已經(jīng)完成更新，所有狀態(tài)已經(jīng)是最新的了
6、onBeforeUnmount(): 組件卸載之前執(zhí)行的函數(shù),實(shí)例被銷毀前調(diào)用，可用于一些定時(shí)器或訂閱的取消
7、onUnmounted(): 組件卸載完成后執(zhí)行的函數(shù),銷毀一個(gè)實(shí)例時(shí)調(diào)用 可以清理與其他實(shí)例的鏈接，解綁它的全部指令以及事件監(jiān)聽器
8、onActivated(): 被包含在 <keep-alive> 中的組件，會(huì)多出兩個(gè)生命周期鉤子函數(shù)，被激活時(shí)執(zhí)行；
9、onDeactivated(): 比如從 A 組件，切換到 B 組件，A 組件消失時(shí)執(zhí)行；
10、onErrorCaptured(): 當(dāng)捕獲一個(gè)來(lái)自子孫組件的異常時(shí)激活鉤子函數(shù);
11、onRenderTracked()：渲染的時(shí)候可以追蹤到;
12、onRenderTriggered():重新渲染的時(shí)候觸發(fā);
13、onServerPrefetch():此鉤子僅在服務(wù)器端渲染期間調(diào)用，可用于執(zhí)行僅服務(wù)器數(shù)據(jù)獲取。
