在vue2.x中敢课，可以通過給元素添加ref='xxx'屬性，然后在代碼中通過this.$refs.xxx獲取到對應(yīng)的元素
然而在vue3中時沒有$refs這個東西的濒募，因此vue3中通過ref屬性獲取元素就不能按照vue2的方式來獲取
vue3需要借助生命周期方法圾结，原因很簡單，在setup執(zhí)行時筝野，template中的元素還沒掛載到頁面上，所以必須在mounted之后才能獲取到元素歇竟。
<template>
<div ref='box'>I am DIV</div>
</template>
<script>
import {ref,onMounted}
export default{
setup(){
let box = ref(null);
onMounted(()=>{
console.log(box.value)
});
return {box}
}
}
</script>
如上代碼，vue3中宝磨，所有生命周期方法都抽離出去了，需要用時直接import懊烤。這里導(dǎo)入了一個onMounted
當(dāng)界面掛載出來的時候，就會自動執(zhí)行onMounted的回調(diào)函數(shù)茸习，里頭就可以獲取到dom元素
小結(jié)
1.在compositionAPI中如何使用生命周期函數(shù)壁肋？
需要用到哪個生命周期函數(shù)，就將對應(yīng)函數(shù)的import進來浸遗，接著在setup中調(diào)用即可
2.vue3如何通過ref屬性獲取界面上的元素?
在template中的寫法跟vue2一樣，給元素添加個ref='xxx'
在setup中跛锌，先創(chuàng)建一個響應(yīng)式數(shù)據(jù)，并且要把響應(yīng)式數(shù)據(jù)暴露出去
當(dāng)元素被創(chuàng)建出來的適合菠赚，就會給對應(yīng)的響應(yīng)數(shù)據(jù)賦值
當(dāng)響應(yīng)式數(shù)據(jù)被賦值之后郑藏，就可以利用生命周期方法，在生命周期方法中獲取對應(yīng)的響應(yīng)式數(shù)據(jù)必盖，即DOM元素
以上就是vue3如何通過ref屬性獲取元素基本過程！
