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

一、ref reactive

1.1.為什么需要ref、reactive

???
setup 函數(shù)中默認定義的變量并不是響應(yīng)式的（即數(shù)據(jù)變了以后頁面不會跟著變），如果想讓變量變?yōu)轫憫?yīng)式的變量，需要使用 ref 和 reactive 函數(shù)修飾變量。

• ref 函數(shù)可以把基本類型變量變?yōu)轫憫?yīng)式引用
• reactive 函數(shù)可以把復(fù)合類型的變量變?yōu)轫憫?yīng)式的引用。

 1.2.ref reactive基本使用

ref：

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

1.引入ref

2.使用ref

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

reactive：

1.引入reactive

2.使用reactive

更推薦使用ref（當(dāng)然要分情況的）

二、toRef、toRefs

???
toRef:

• 只希望轉(zhuǎn)換一個reactive對象中的屬性為ref, 那么可以使用toRef的方法：
• 獲取數(shù)據(jù)值需要加.value

toRefs

• 使用ES6的解構(gòu)語法，因為一個響應(yīng)式對象直接結(jié)構(gòu)時，結(jié)構(gòu)后的數(shù)據(jù)不再具有響應(yīng)式
• Vue為我們提供了一個toRefs的函數(shù)，可以將reactive返回的對象中的屬性都轉(zhuǎn)成ref；

 基本使用：

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

 三、$refs

?????

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

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

1.在元素中

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

通過this.$refs就可以調(diào)用

在組件中

子組件

父組件調(diào)用子組件的對象方法、獲取組件實例和元素

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

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

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

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

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

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

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

toRefs: 將響應(yīng)式reactive對象轉(zhuǎn)換為普通對象，多用于響應(yīng)式對象轉(zhuǎn)為普通對象后解構(gòu)（對象中的數(shù)據(jù)依舊是響應(yīng)式）

setup(){
    const refA = reactive({
        name: "LISA",
        age: "36"
    })
    return{
        ...toRefs(refA) 
    }
    // 相當(dāng)于return了 name: ref("LISA"),age: ref("36")
}

總結(jié)

到此這篇關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)的文章就介紹到這了,更多相關(guān)Vue中ref reactive toRef toRefs $refs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論