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

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

1、對于在 setup 中手動返回的響應式數(shù)據(jù)，在 template 中使用時無需加 .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 能定義“任何類型”的響應式數(shù)據(jù)

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

例如：

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

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

二、reactive——定義響應式對象

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

例如：

<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——將一個 reactive 轉化為一個 ref

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

例如：在 setup 中使用父組件傳遞的 props 數(shù)據(jù)時，要引用 props 的某個屬性，且要保持響應式連接，就必須使用 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——將多個 reactive 自動解構為多個 ref

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

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

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

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

最新評論