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

一、ref reactive

1.1.為什么需要ref、reactive

???
setup 函數中默認定義的變量并不是響應式的（即數據變了以后頁面不會跟著變），如果想讓變量變?yōu)轫憫降淖兞?，需要使?code> ref 和 reactive 函數修飾變量。

• ref 函數可以把基本類型變量變?yōu)轫憫揭?/li>
• reactive 函數可以把復合類型的變量變?yōu)轫憫降囊谩?/li>

 1.2.ref reactive基本使用

ref：

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

1.引入ref

2.使用ref

查閱資料發(fā)現：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節(jié)點，然后再獲取這個節(jié)點的值
• 在vue中，元素綁定ref后，直接通過this.$refs就可以調用。這樣可以減少獲取dom節(jié)點的消耗

1.在元素中

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

通過this.$refs就可以調用

在組件中

子組件

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

簡單描述vue3中ref、reactive、toRef、toRefs區(qū)別

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

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

reactive:reactive用于創(chuàng)建引用類型的響應式對象

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

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

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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論