vue3如何使用ref獲取元素

更新時(shí)間：2022年05月24日 09:35:03 作者：只會(huì)cv的小前端

這篇文章主要介紹了vue3如何使用ref獲取元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3使用ref獲取元素

在vue2.x中，可以通過(guò)給元素添加ref='xxx'屬性，然后在代碼中通過(guò)this.$refs.xxx獲取到對(duì)應(yīng)的元素

然而在vue3中時(shí)沒(méi)有$refs這個(gè)東西的，因此vue3中通過(guò)ref屬性獲取元素就不能按照vue2的方式來(lái)獲取

vue3需要借助生命周期方法，原因很簡(jiǎn)單，在setup執(zhí)行時(shí)，template中的元素還沒(méi)掛載到頁(yè)面上，所以必須在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中ref的理解

1.什么是ref?

ref和reactive一樣,也是用來(lái)實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法

由于reactive必須傳遞一個(gè)對(duì)象,所以在實(shí)際開(kāi)發(fā)中如果只是想讓某個(gè)變量實(shí)現(xiàn)響應(yīng)式的時(shí)候回非常麻煩

所以Vue3提供了ref方法實(shí)現(xiàn)簡(jiǎn)單值得監(jiān)聽(tīng)

2.ref本質(zhì)

ref底層其實(shí)還是reactive,所以當(dāng)運(yùn)行時(shí)系統(tǒng)會(huì)自動(dòng)根據(jù)傳入的ref轉(zhuǎn)換成reactive.

3.ref注意點(diǎn)

在vue中使用ref的值不用通過(guò)value獲取

在js中使用ref的值必須通過(guò)value獲取

在這里插入圖片描述

4.ref獲取元素

在vue2中我們可以通過(guò)給元素添加ref=‘xxx’,然后在代碼中通過(guò)refs.xxx的方式來(lái)獲取元素,在vue3中也可以通過(guò)ref來(lái)獲取元素.

但不是像以下這種熟悉的方式,因?yàn)樵趘ue3中沒(méi)有$和refs這些東西.

錯(cuò)誤示范

在這里插入圖片描述

正確寫(xiě)法

<template>
? <div>
? ? <div ref="box">我是div</div>
? </div>
</template>

<script>
import { ref,onMounted } from "vue";
export default {
? setup() {
? ? let box = ref(null); //本質(zhì)是reactive({value:null})
? ? // 需要在生命周期獲取
? ? onMounted(()=>{
? ? ? // 當(dāng)界面掛載出來(lái)后就會(huì)自動(dòng)執(zhí)行
? ? ? console.log(box.value);
? ? })
? ? //接受的是null,原因是setup執(zhí)行時(shí)機(jī)比mounted早,dom還沒(méi)形成
? ? console.log(box.value);
? ? return { box };
? },
};
</script>

在這里插入圖片描述