快捷導(dǎo)航

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

更新時間：2024年08月14日 09:25:18 作者：是個忙人.

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

ref與reactive的區(qū)別

接收值的類型不同

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

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

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

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

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

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

訪問數(shù)據(jù)的方式不同

對于 ref來說，無論是原始類型還是對象，訪問數(shù)據(jù)都需要通過 .value的形式進(jìn)行，更新數(shù)據(jù)也需要通過 .value來更新。

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

但在<template>中使用ref的值時不需要帶上.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)聽方式不同

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

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

這里只是原始類型數(shù)據(jù)，如果是對象的話，需要深度監(jiān)聽deep:true。

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

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

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

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

基本用法

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

import { ref } from 'vue';

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

在setup()中使用

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

import { ref } from 'vue';

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

<script setup>語法是一種簡潔的寫法，可以在單文件組件中更便捷地使用ref。

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

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

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

基本概念

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

import { reactive } from 'vue';

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

在模板中使用Reactive

在模板中可以直接使用響應(yīng)式對象，對對象的屬性進(jì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)建一個響應(yīng)式的基本數(shù)據(jù)類型，如數(shù)字、字符串等。通過ref函數(shù)創(chuàng)建，訪問和修改數(shù)據(jù)值需要使用.value。
在setup()中使用：在setup()函數(shù)中，我們可以使用ref來創(chuàng)建響應(yīng)式數(shù)據(jù)，并在模板中使用。
<script setup>語法：<script setup>語法是Vue3推薦的一種寫法，可以在單文件組件中更簡潔地使用ref。
為何使用ref：Ref適用于管理簡單的基本數(shù)據(jù)類型，如數(shù)字、字符串等。

reactive

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

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

使用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ù)類型沒什么差別，接下來看看reactive

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

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

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

需要注意的是，使用 tableData = data 的修改方式會造成 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ù)組外層嵌套一個對象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通過訪問list屬性重新賦值
}
// 方法四：賦值前再包一層 reactive
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData = reactive(data) // 賦值前再包一層reactive
}