快捷導(dǎo)航

vue3.0中ref與reactive的區(qū)別及使用場(chǎng)景分析

更新時(shí)間：2023年08月28日 11:22:22 作者：cv全粘工程師

ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下

什么是ref與reactive

ref與reactive都是Vue3.0中新增的API，用于響應(yīng)式數(shù)據(jù)的處理。

1. ref

ref是一個(gè)函數(shù)，可以用于將一個(gè)普通的數(shù)據(jù)類型轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)。ref返回一個(gè)包含value屬性的對(duì)象，通過(guò)修改value屬性的值，可以觸發(fā)組件更新。

使用方式如下：

import { ref } from 'vue'
const count = ref(0)
// 獲取值
console.log(count.value)
// 修改值
count.value++
// 在模板中使用
<template>
  <div>{{ count }}</div>
</template>

2. reactive

reactive是一個(gè)函數(shù)，用于將一個(gè)普通的對(duì)象轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)。reactive返回一個(gè)響應(yīng)式的Proxy對(duì)象，通過(guò)修改該對(duì)象的屬性值，可以觸發(fā)組件更新。

使用方式如下：

import { reactive } from 'vue'
const state = reactive({
  count: 0,
  name: 'Tom'
})
// 獲取值
console.log(state.count)
// 修改值
state.count++
// 在模板中使用
<template>
  <div>{{ state.count }}</div>
</template>

區(qū)別:

ref只能用于將基本類型數(shù)據(jù)轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)，而reactive可以將任意對(duì)象轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)。
ref返回一個(gè)包含value屬性的對(duì)象，而reactive返回一個(gè)響應(yīng)式的Proxy對(duì)象。
在使用上，ref更方便一些，使用起來(lái)更簡(jiǎn)單直觀。而reactive比較靈活，可以將任意對(duì)象轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)，并且可以進(jìn)行深層次的響應(yīng)式處理。

reactive() API 有一些局限性：

有限的值類型：

它只能用于對(duì)象類型 (對(duì)象、數(shù)組和如 Map、Set 這樣的集合類型)。它不能持有如 string、number 或 boolean 這樣的原始類型。

不能替換整個(gè)對(duì)象：

由于 Vue 的響應(yīng)式跟蹤是通過(guò)屬性訪問(wèn)實(shí)現(xiàn)的，因此我們必須始終保持對(duì)響應(yīng)式對(duì)象的相同引用。這意味著我們不能輕易地“替換”響應(yīng)式對(duì)象，因?yàn)檫@樣的話與第一個(gè)引用的響應(yīng)性連接將丟失：

let state = reactive({ count: 0 })
// 上面的 ({ count: 0 }) 引用將不再被追蹤
// (響應(yīng)性連接已丟失！)
state = reactive({ count: 1 })

對(duì)解構(gòu)操作不友好：

當(dāng)我們將響應(yīng)式對(duì)象的原始類型屬性解構(gòu)為本地變量時(shí)，或者將該屬性傳遞給函數(shù)時(shí)，我們將丟失響應(yīng)性連接：

const state = reactive({ count: 0 })
// 當(dāng)解構(gòu)時(shí)，count 已經(jīng)與 state.count 斷開連接
let { count } = state
// 不會(huì)影響原始的 state
count++
// 該函數(shù)接收到的是一個(gè)普通的數(shù)字
// 并且無(wú)法追蹤 state.count 的變化
// 我們必須傳入整個(gè)對(duì)象以保持響應(yīng)性
callSomeFunction(state.count)

需要注意的是，使用ref和reactive時(shí)，不能直接修改屬性值的方式來(lái)更新數(shù)據(jù)，而是應(yīng)該通過(guò)修改value或Proxy對(duì)象的屬性來(lái)觸發(fā)組件更新。例如：

// ref使用示例
const count = ref(0)
count++ // 這樣是錯(cuò)誤的，應(yīng)該使用count.value++
// reactive使用示例
const state = reactive({
  count: 0
})
state.count++ // 這樣是正確的，會(huì)觸發(fā)組件更新

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

您可能感興趣的文章: