<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一樣,也是用來實現(xiàn)響應式數(shù)據(jù)的方法

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

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

2.ref本質(zhì)

ref底層其實還是reactive,所以當運行時系統(tǒng)會自動根據(jù)傳入的ref轉換成reactive.

3.ref注意點

在vue中使用ref的值不用通過value獲取

在js中使用ref的值必須通過value獲取

在這里插入圖片描述

4.ref獲取元素

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

但不是像以下這種熟悉的方式,因為在vue3中沒有$和refs這些東西.

錯誤示范

在這里插入圖片描述

正確寫法

<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(()=>{
? ? ? // 當界面掛載出來后就會自動執(zhí)行
? ? ? console.log(box.value);
? ? })
? ? //接受的是null,原因是setup執(zhí)行時機比mounted早,dom還沒形成
? ? console.log(box.value);
? ? return { box };
? },
};
</script>

在這里插入圖片描述