很激動(dòng)進(jìn)入了 Vue 3 的學(xué)習(xí)，作為一個(gè)已經(jīng)上線了三年多的框架，很多項(xiàng)目都開始使用 Vue 3 來編寫了
這一組文章主要聚焦于 Vue 3 的新技術(shù)和新特性
如果想要學(xué)習(xí)基礎(chǔ)的 Vue 語法可以看我專欄中的其他博客
Vue（一）：Vue 入門與 Vue 指令
Vue（二）：計(jì)算屬性與 watch 監(jiān)聽器
Vue（三）：Vue 生命周期與工程化開發(fā)
一篇文章快速通關(guān) Vuex（適合小白學(xué)習(xí)）
Vue 框架前導(dǎo)：詳解 Ajax
快速打通 Vue 3（一）：基本介紹與組合式 API
快速打通 Vue 3（二）：響應(yīng)式對象基礎(chǔ)
快速打通 Vue 3（三）：Vue3 中的 watch 監(jiān)聽器與新特性
上一篇 Vue3 博客：快速打通 Vue 3（三）：Vue3 中的 watch 監(jiān)聽器與新特性
后續(xù)還會(huì)繼續(xù)更新，期待大家的關(guān)注！
因?yàn)槲蚁胍獙?Vue3 分模塊整理，后面要接一篇路由的整理，所以這篇文章會(huì)比較短，后面路由想保證量大管飽（bushi）。
06. 標(biāo)簽的 ref 屬性
? 當(dāng)我們想要獲取一個(gè)標(biāo)簽對應(yīng)的
DOM元素的時(shí)候在JavaScript中，我們通過document.querySelector()來借助類選擇器的寫法獲取，但是在Vue中，我們的DOM元素是掛載在同一個(gè)網(wǎng)頁上的，這些名稱難免會(huì)重復(fù)，所以需要?jiǎng)e的方式去獲取。
6.1 用在普通標(biāo)簽上
這里就需要借助給標(biāo)簽加上 ref 屬性
直接來上代碼
<template>
<h1 ref="h1">111</h1>
<button @click="getLog">命令展示</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const h1 = ref();
const getLog = () => {
console.log(h1.value);
}
</script>
? 這里我們書寫了一個(gè) h1 標(biāo)簽，給 h1 加上 ref 屬性，屬性值為 h1，下面來通過與屬性值同名的響應(yīng)式變量來獲取這個(gè) DOM 元素。
可以直接拿到這個(gè)對象，像我們之前去操作 DOM 元素那樣，可以對它進(jìn)行任何操作。
- 補(bǔ)充：這里為什么不直接寫
console.log(h1.vale)而是要書寫一個(gè)函數(shù)然后綁定事件？主要原因是我們執(zhí)行javaScript代碼的時(shí)候，這個(gè)元素還沒有掛載完成，在后面學(xué)習(xí)生命周期后，可以通過鉤子函數(shù)實(shí)現(xiàn)在掛載完成后打印。
6.2 用在組件標(biāo)簽上
<template>
<Son ref="son"></Son>
<button @click="showMessage">打印信息</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Son from './components/Son.vue';
const son = ref();
const showMessage = () => {
console.log(son.value);
}
</script>
和上面相同，打印出來的是子組件的示例對象，但示例對象中的信息我們是無法拿到的，需要子組件去配置defineExpose({暴露出去的信息})
<template>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const a = ref();
const b = ref();
const c = ref();
defineExpose({a, b, c});
</script>
我們就能拿到暴露出來的信息，也可以通過數(shù)組來導(dǎo)出。
07. 生命周期
?
Vue組件實(shí)例在創(chuàng)建時(shí)要經(jīng)歷一系列的初始化步驟，在此過程中Vue會(huì)在特定的事件去調(diào)用特定的函數(shù)，從而讓開發(fā)者有機(jī)會(huì)在特定的階段去運(yùn)行自己的代碼，這些待定的函數(shù)稱之為生命周期鉤子。
與 Vue2 相比， Vue3 對生命周期做了簡化，不再去寫選項(xiàng)式API，而是采用函數(shù)的方式去代替，并且對各個(gè)生命周期的函數(shù)都做了簡化：
-
Vue2 的生命周期創(chuàng)建階段：
beforeCreate、created掛載階段：
beforeMount、mounted更新階段：
beforeUpdate、updated銷毀階段：
beforeDestroy、destroyed -
Vue3 的生命周期創(chuàng)建階段：
setup掛載階段：
onBeforeMount、onMounted更新階段：
onBeforeUpdate、onUpdated卸載階段：
onBeforeUnmount、onUnmounted
? 比較重要的兩個(gè)階段就是創(chuàng)建階段和掛載階段，在更新階段我們可以向服務(wù)端請求數(shù)據(jù)，掛載完成后我們可以獲取 DOM 元素然后對其進(jìn)行操作。
? 在 Vue3 中將其創(chuàng)建階段簡化為 setup，方便了代碼的書寫。
我們上面提到為什么不使用 console.log(h1.value) 直接打印而是要寫個(gè)函數(shù)，就是因?yàn)楫?dāng)我們能看到那個(gè)按鈕的時(shí)候說明已經(jīng)掛載完畢了，可以來獲取元素了，如果直接打印獲取到的就是 undefined 。
但通過生命周期函數(shù)可以實(shí)現(xiàn)：
<template>
<h1 ref="h1">111</h1>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const h1 = ref();
onMounted(() => {
console.log(h1.value);
})
</script>
我們在掛載完畢后再打印就能夠獲取到了。
再來查看一個(gè)父子組件的生命周期關(guān)系
<template>
<Son></Son>
</template>
<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue';
import Son from './components/Son.vue';
console.log("父組件 - 創(chuàng)建階段");
onBeforeMount(() => {
console.log("父組件 - 掛載前階段")
})
onMounted(() => {
console.log("父組件 - 掛載后階段")
})
onBeforeUpdate(() => {
console.log("父組件 - 更新前階段")
})
onBeforeUpdate(() => {
console.log("父組件 - 更新后階段")
})
</script>
<template>
</template>
<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue';
console.log("子組件 - 創(chuàng)建階段");
onBeforeMount(() => {
console.log("子組件 - 掛載前階段")
})
onMounted(() => {
console.log("子組件 - 掛載后階段")
})
onBeforeUpdate(() => {
console.log("子組件 - 更新前階段")
})
onBeforeUpdate(() => {
console.log("子組件 - 更新后階段")
})
</script>
打印結(jié)果
文章來源：http://www.zghlxwxcb.cn/news/detail-801802.html
先去加載完成子組件再去加載父組件，所以通過網(wǎng)絡(luò)請求數(shù)據(jù)并且傳入子組件需要在父組件的創(chuàng)建階段完成。文章來源地址http://www.zghlxwxcb.cn/news/detail-801802.html
到了這里，關(guān)于快速打通 Vue 3（四）：標(biāo)簽的 ref 屬性與 Vue3 生命周期的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
