快捷導(dǎo)航

前端vue3中的ref與reactive用法及區(qū)別總結(jié)

更新時(shí)間：2024年08月14日 09:25:18 作者：是個(gè)忙人.

這篇文章主要給大家介紹了關(guān)于前端vue3中的ref與reactive用法及區(qū)別的相關(guān)資料,關(guān)于ref及reactive的用法,還是要在開(kāi)發(fā)中多多使用,遇到響應(yīng)式失效問(wèn)題,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

ref與reactive的區(qū)別

接收值的類(lèi)型不同

ref：ref可以處理基礎(chǔ)類(lèi)型的值，也可以處理引用類(lèi)型的值。

const ref1 = ref(0)            // true
const ref2 = ref({ count: 0 }) // true

用于創(chuàng)建一個(gè)響應(yīng)式的基本數(shù)據(jù)類(lèi)型時(shí)，比如數(shù)字、字符串等。它將普通的數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，可以監(jiān)聽(tīng)數(shù)據(jù)的變化。使用ref時(shí)，我們可以通過(guò).value來(lái)訪(fǎng)問(wèn)和修改數(shù)據(jù)的值。

reactive：reactive僅處理引用類(lèi)型的值，不允許傳遞基礎(chǔ)類(lèi)型的值。

const reactive1 = reactive(0)            // false
const reactive2 = reactive({ count: 0 }) // true

reactive用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象，可以包含多個(gè)屬性。通過(guò)reactive，我們可以將整個(gè)對(duì)象變成響應(yīng)式，使對(duì)象的任何屬性發(fā)生變化時(shí)都能被檢測(cè)到。

訪(fǎng)問(wèn)數(shù)據(jù)的方式不同

對(duì)于 ref來(lái)說(shuō)，無(wú)論是原始類(lèi)型還是對(duì)象，訪(fǎng)問(wèn)數(shù)據(jù)都需要通過(guò) .value的形式進(jìn)行，更新數(shù)據(jù)也需要通過(guò) .value來(lái)更新。

<template>
      <div>{{ dxc }}</div>
</template>
 
<script setup>
    import { ref } from 'vue'
    const dxc = ref(0)
</script>

但在<template>中使用ref的值時(shí)不需要帶上.value。

const ref1 = ref(0) 
console.log(ref1.value)  // 0
 
const ref2 = ref({ count: 0 })
console.log(ref2.value.count)  // 0
 
ref1.value = 1
console.log(ref1.value)  // 1

watch監(jiān)聽(tīng)方式不同

ref可以直接監(jiān)聽(tīng)數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，就會(huì)執(zhí)行 watch 函數(shù)對(duì)應(yīng)的回調(diào)。

const ref1 = ref(0)
watch(ref1, () => { 
  console.log('changed!')
})

這里只是原始類(lèi)型數(shù)據(jù)，如果是對(duì)象的話(huà)，需要深度監(jiān)聽(tīng)deep:true。

const ref1 = ref({num: 1})
watch(ref1, () => { 
    console.log('changed!')
})
 
// ref1.value.num = 1 
// 執(zhí)行該語(yǔ)句時(shí)并不會(huì)觸發(fā)watch監(jiān)聽(tīng)，watch 并沒(méi)有對(duì)ref1進(jìn)行深度監(jiān)聽(tīng)
// 但注意，此時(shí)dom是能更新的，ref會(huì)將其轉(zhuǎn)換成 reactive 的形式
 
// 要想深入監(jiān)聽(tīng)，只需要加一個(gè)對(duì)應(yīng)的參數(shù)即可
const ref1 = ref({num: 1})
watch(ref1, () => { 
    console.log('changed!')
}, { deep: true })

reactive因?yàn)楸举|(zhì)是對(duì)象，所以在 watch 的時(shí)候本能的會(huì)添加 deep 屬性。vue 對(duì)其做了優(yōu)化 watch 監(jiān)聽(tīng) reactive 的時(shí)候可以不添加 deep 屬也能夠?qū)ζ渥錾疃缺O(jiān)聽(tīng)。

const reactive1 = reactive({num: 1})
watch(reactive1, () => { 
    console.log('changed!')
})
// reactive1.num = 1
// 觸發(fā)watch監(jiān)聽(tīng)

Ref基本用法及在setup()中的使用

基本用法

在Vue3中，ref用于創(chuàng)建一個(gè)響應(yīng)式的基本數(shù)據(jù)類(lèi)型，如數(shù)字、字符串等。通過(guò)ref()函數(shù)創(chuàng)建一個(gè)ref對(duì)象，然后可以通過(guò).value來(lái)訪(fǎng)問(wèn)和修改數(shù)據(jù)值。

import { ref } from 'vue';

const count = ref(0); // 創(chuàng)建一個(gè)Ref對(duì)象，初始值為0
console.log(count.value); // 訪(fǎng)問(wèn)Ref對(duì)象的值
count.value = 1; // 修改Ref對(duì)象的值

在setup()中使用

在setup()函數(shù)中，我們可以使用ref()來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)，以便在組件中使用。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return {
      count
    };
  }
};

<script setup>語(yǔ)法是一種簡(jiǎn)潔的寫(xiě)法，可以在單文件組件中更便捷地使用ref。

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

Reactive基本概念及在模板中的使用

基本概念

在Vue3中，reactive用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象，使對(duì)象的屬性發(fā)生變化時(shí)能夠被檢測(cè)到。通過(guò)reactive()函數(shù)創(chuàng)建一個(gè)響應(yīng)式對(duì)象，對(duì)象的所有屬性都變成響應(yīng)式。

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 30
});

在模板中使用Reactive

在模板中可以直接使用響應(yīng)式對(duì)象，對(duì)對(duì)象的屬性進(jìn)行訪(fǎng)問(wèn)和修改。

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'Alice',
      age: 30
    });

    return { user };
  }
};
</script>

ref與reactive用法總結(jié)

ref

基本用法：Ref用于創(chuàng)建一個(gè)響應(yīng)式的基本數(shù)據(jù)類(lèi)型，如數(shù)字、字符串等。通過(guò)ref函數(shù)創(chuàng)建，訪(fǎng)問(wèn)和修改數(shù)據(jù)值需要使用.value。
在setup()中使用：在setup()函數(shù)中，我們可以使用ref來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)，并在模板中使用。
<script setup>語(yǔ)法：<script setup>語(yǔ)法是Vue3推薦的一種寫(xiě)法，可以在單文件組件中更簡(jiǎn)潔地使用ref。
為何使用ref：Ref適用于管理簡(jiǎn)單的基本數(shù)據(jù)類(lèi)型，如數(shù)字、字符串等。

reactive

基本概念：Reactive用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象，可以包含多個(gè)屬性。通過(guò)reactive函數(shù)創(chuàng)建，對(duì)象的任何屬性變化都會(huì)被檢測(cè)到。
在模板中使用Reactive：在模板中可以直接使用響應(yīng)式對(duì)象，對(duì)對(duì)象的屬性進(jìn)行訪(fǎng)問(wèn)和修改。
深層響應(yīng)式：Reactive會(huì)遞歸地將對(duì)象的所有嵌套屬性都變成響應(yīng)式。
與ref區(qū)別：Ref適用于簡(jiǎn)單數(shù)據(jù)類(lèi)型，而Reactive適用于對(duì)象，可以處理對(duì)象的多個(gè)屬性。
為何使用Reactive：Reactive適用于管理復(fù)雜對(duì)象，使整個(gè)對(duì)象都變成響應(yīng)式。

附：ref和reactive定義數(shù)組對(duì)比

使用ref定義數(shù)組舉例如下

const tableData = ref([]) // 定義

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模擬接口獲取表格數(shù)據(jù)
	tableData.value = data // 修改
}

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

圖中以我們常用的表格數(shù)據(jù)舉例，可以看到，ref定義數(shù)組與定義基本數(shù)據(jù)類(lèi)型沒(méi)什么差別，接下來(lái)看看reactive

const tableData = reactive([]) // 定義

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模擬接口獲取表格數(shù)據(jù)
	tableData = data // 修改，錯(cuò)誤示例，這樣賦值會(huì)使tableData失去響應(yīng)式
}

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

需要注意的是，使用 tableData = data 的修改方式會(huì)造成 tableData 響應(yīng)式丟失，解決方法如下（供參考）

// 方法一：改為 ref 定義
const tableData = ref([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.value = data // 使用.value重新賦值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.push(...data) // 先使用...將data解構(gòu)，再使用push方法
}
// 方法三：定義時(shí)數(shù)組外層嵌套一個(gè)對(duì)象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通過(guò)訪(fǎng)問(wèn)list屬性重新賦值
}
// 方法四：賦值前再包一層 reactive
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData = reactive(data) // 賦值前再包一層reactive
}