Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結

Posted on by

不知道有沒有和我一樣，看見那麼多帶ref的慢慢就暈瞭，所以寫一個簡單的總結吧嘿嘿

一、ref reactive

1.1.為什麼需要ref、reactive

⭐⭐⭐
setup 函數中默認定義的變量並不是響應式的（即數據變瞭以後頁面不會跟著變），如果想讓變量變為響應式的變量，需要使用 ref 和 reactive 函數修飾變量。

  • ref 函數可以把基本類型變量變為響應式引用
  • reactive 函數可以把復合類型的變量變為響應式的引用。

 1.2.ref reactive基本使用

ref：

  • ref用於為數據添加響應式狀態
  • 獲取數據值需要加.value
  • 因為reactive隻能傳入對象類型的參數，所以基本數據類型添加響應式狀態隻能用ref（ref也可以定義復雜的數據哦~）

1.引入ref

2.使用ref

查閱資料發現：ref底層使用的是proxy代理函數實現雙向綁定，proxy 函數必須要接收一個對象，如果想修改 name 的值，需要使用 name.value。（這個很重要的）

reactive：

1.引入reactive

2.使用reactive

更推薦使用ref（當然要分情況的）

二、toRef、toRefs

⭐⭐⭐
toRef:

  • 隻希望轉換一個reactive對象中的屬性為ref, 那麼可以使用toRef的方法：
  • 獲取數據值需要加.value

toRefs

  • 使用ES6的解構語法，因為一個響應式對象直接結構時，結構後的數據不再具有響應式
  • Vue為我們提供瞭一個toRefs的函數，可以將reactive返回的對象中的屬性都轉成ref；

 基本使用：

選一個使用就可以，不然會很亂

 三、$refs

⭐⭐⭐⭐⭐

$refs：直接獲取到元素對象或者子組件實例

  • 在Vue中，我們可以給元素或者組件綁定一個ref的attribute屬性；（不推薦進行DOM操作）
  • 在js中：通過document.querySelector("#demo")來獲取dom節點，然後再獲取這個節點的值
  • 在vue中，元素綁定ref後，直接通過this.$refs就可以調用。這樣可以減少獲取dom節點的消耗

1.在元素中

在元素中綁定一個ref的attribute屬性

通過this.$refs就可以調用

在組件中

子組件

父組件調用子組件的對象方法、獲取組件實例和元素

簡單描述vue3中ref、reactive、toRef、toRefs區別

ref:ref用於創建基礎數據類型的響應式變量（采用復制的方式，修改響應式數據不會影響原始數據，數據發生改變，界面就會自動更新）

setup(){
    const refA = ref(0)
}

reactive:reactive用於創建引用類型的響應式對象

setup(){
    const refA = reactive({
        name: "LISA",
        age: "36"
    })
}

toRef: toRef接收兩個參數target和attr，target是一般是reactive的響應式對象，attr是對象的屬性，返回響應式變量（采用引用的方式，修改響應式數據，會影響原始數據，並且數據發生改變）

setup(){
    const object = reactive({ name: "LISA", age: "36" })
    const refA = toRef(object, name) 
}

toRefs: 將響應式reactive對象轉換為普通對象，多用於響應式對象轉為普通對象後解構（對象中的數據依舊是響應式）

setup(){
    const refA = reactive({
        name: "LISA",
        age: "36"
    })
    return{
        ...toRefs(refA) 
    }
    // 相當於return瞭 name: ref("LISA"),age: ref("36")
}

總結

到此這篇關於Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結的文章就介紹到這瞭,更多相關Vue中ref reactive toRef toRefs $refs內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：