一、ref——定義任意類型響應(yīng)式數(shù)據(jù)

• ref 能定義“任何類型”的響應(yīng)式數(shù)據(jù)（ref 在 vue3 中指響應(yīng)式數(shù)據(jù)）。
• 參數(shù)可以傳入任意數(shù)據(jù)類型。
• 使用 ref 定義的屬性必須通過 .value 的形式才能修改其值。屬性的值一旦被修改就會(huì)觸發(fā)模板的重新渲染以顯示最新的值。
• 對(duì)于在 setup 返回的 refs（return 出的對(duì)象里的屬性），因?yàn)樵谀０逯性L問它們時(shí)，它們會(huì)被自動(dòng)淺解包，所以在 template 中使用時(shí)無需加 .value。

1、對(duì)于在 setup 中手動(dòng)返回的響應(yīng)式數(shù)據(jù)，在 template 中使用時(shí)無需加 .value

例如：

<template>
? <div>{{ count }}</div>
</template>
<script>
? import { ref } from 'vue'

? export default {
? ? setup(props) {
? ? ? const count = ref(0)
? ? ? // 暴露給 template 的屬性，可以直接在 template 中使用
? ? ? return {
? ? ? ? count
? ? ? }
? ? }
? }
</script>

2、ref 能定義“任何類型”的響應(yīng)式數(shù)據(jù)

如果將 setup 寫在 <script> 標(biāo)簽里，則該標(biāo)簽里的腳本都是執(zhí)行在 setup 里的，并且里面聲明數(shù)據(jù)均會(huì)默認(rèn)地暴露給 template，在 template 中使用時(shí)無需加 .value。

例如：

<template>
? <div>{{ name }} : {{ state.age }}</div>
</template>
<script setup>
? import { ref } from 'vue'

? // 為基本數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
? const name = ref('Marry')
? // 為復(fù)雜數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
? const state = ref({
? ? age: 18
? })
? // 打印name的值
? console.log(name.value)
? // 打印count的值
? console.log(state.value.age)
</script>

二、reactive——定義響應(yīng)式對(duì)象

• 用來定義“對(duì)象類型”的響應(yīng)式數(shù)據(jù)。
• 參數(shù)只能傳入對(duì)象類型，返回一個(gè)具有響應(yīng)式狀態(tài)的副本。
• 使用 reactive 定義的屬性可以直接使用，不需要加 .value。
• 不要直接解構(gòu)使用 reactive 定義的響應(yīng)式對(duì)象，否則會(huì)造成該對(duì)象脫離 ref 響應(yīng)式。需要用 toRefs 將其轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)對(duì)象，然后再解構(gòu)返回。

例如：

<template>
? <div>{{ obj.count }}</div>
</template>
<script setup>
? import { reactive } from 'vue'
??
? const obj = reactive({
? ? count: 0
? })
? // 使用 reactive 定義的屬性可以直接使用，不需要加 .value
? console.log(state.count)
</script>

三、toRef——將一個(gè) reactive 轉(zhuǎn)化為一個(gè) ref

• 針對(duì)一個(gè)響應(yīng)式對(duì)象（reactive 封裝）的 prop（屬性）創(chuàng)建一個(gè) ref，且保持響應(yīng)式兩者 保持引用關(guān)系。
• 接收兩個(gè)參數(shù)：源響應(yīng)式對(duì)象 和 屬性名，返回一個(gè) ref 數(shù)據(jù)。
• 獲取數(shù)據(jù)值的時(shí)候需要加 .value。
• 使用 toRef 轉(zhuǎn)化后生成的 ref 數(shù)據(jù)如果是引用類型數(shù)據(jù)時(shí)，那么它不是原始數(shù)據(jù)的拷貝，而是原始數(shù)據(jù)的引用，改變它的數(shù)據(jù)也會(huì)同時(shí)改變原始數(shù)據(jù)。

例如：在 setup 中使用父組件傳遞的 props 數(shù)據(jù)時(shí)，要引用 props 的某個(gè)屬性，且要保持響應(yīng)式連接，就必須使用 toRef。

<template>
? <div>{{ myTitle }}</div>
</template>
<script>
? import { defineComponent, toRef } from 'vue'

? export default defineComponent({
? ? props: [title],
? ? setup (props) {
? ? ? // 創(chuàng)建變量myTitle
? ? ? const myTitle = toRef(props, 'title')
? ? ? console.log(myTitle.value)
? ? ? return {
?? ??? ?myTitle
? ? ? }
? ? }
? })
</script>

四、toRefs——將多個(gè) reactive 自動(dòng)解構(gòu)為多個(gè) ref

• toRefs 用于將響應(yīng)式對(duì)象轉(zhuǎn)換為普通對(duì)象，其中普通對(duì)象的每個(gè)屬性都是指向原始對(duì)象相應(yīng)屬性的 ref，兩者保持引用關(guān)系。
• toRefs 常用于 ES6 的解構(gòu)賦值操作。但是，對(duì)一個(gè)響應(yīng)式對(duì)象直接解構(gòu)時(shí)，解構(gòu)后的數(shù)據(jù)將不再有響應(yīng)式，而使用 toRefs 可以方便解決這個(gè)問題。
• 獲取數(shù)據(jù)值的時(shí)候需要加 .value。
• 使用 toRefs 轉(zhuǎn)化后生成的 ref 數(shù)據(jù)如果是引用類型數(shù)據(jù)時(shí)，那么它不是原始數(shù)據(jù)的拷貝，而是原始數(shù)據(jù)的引用，改變它的數(shù)據(jù)也會(huì)同時(shí)改變原始數(shù)據(jù)。
• 其作用和 toRef 類似，只不過 toRef 是對(duì)一個(gè)個(gè)屬性手動(dòng)賦值，而 toRefs 是自動(dòng)解構(gòu)賦值。

<template>
? <div>{{ myTitle }}</div>
</template>
<script>
? import { defineComponent, toRefs } from 'vue'

? export default defineComponent({
? ? props: [title],
? ? setup (props) {
? ? ? // toRefs 默認(rèn)使用了解構(gòu)賦值，創(chuàng)建了變量 myTitle
? ? ? const { myTitle } = toRefs(props)
? ? ? console.log(myTitle.value)
? ? ? return {
?? ??? ?myTitle
?? ? ?}
? ? }
? })
</script>

到此這篇關(guān)于淺談vue3中ref、toRef、toRefs 和 reactive的區(qū)別的文章就介紹到這了,更多相關(guān)vue3 ref toRef toRefs reactive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論