快捷導(dǎo)航

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

更新時(shí)間：2022年11月07日 12:07:56 作者：東非不開森

這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、ref reactive

1.1.為什么需要ref、reactive

???
setup 函數(shù)中默認(rèn)定義的變量并不是響應(yīng)式的（即數(shù)據(jù)變了以后頁(yè)面不會(huì)跟著變），如果想讓變量變?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
因?yàn)閞eactive只能傳入對(duì)象類型的參數(shù)，所以基本數(shù)據(jù)類型添加響應(yīng)式狀態(tài)只能用ref（ref也可以定義復(fù)雜的數(shù)據(jù)哦~）

1.引入ref

2.使用ref

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

reactive：

1.引入reactive

2.使用reactive

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

二、toRef、toRefs

???
toRef:

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

toRefs

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

基本使用：

選一個(gè)使用就可以，不然會(huì)很亂

三、$refs

?????

$refs：直接獲取到元素對(duì)象或者子組件實(shí)例

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

1.在元素中

在元素中綁定一個(gè)ref的attribute屬性

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

在組件中

子組件

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

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

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

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

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

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

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

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

toRefs: 將響應(yīng)式reactive對(duì)象轉(zhuǎn)換為普通對(duì)象，多用于響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象后解構(gòu)（對(duì)象中的數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: