Vue3中ref和reactive的使用場景詳解
更新時間：2025年04月17日 17:24:35 作者：墮落年代
這篇文章主要介紹了Vue3中ref和reactive的使用場景,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue3中ref和reactive的使用場景
一、核心區(qū)別
| 特性 | ref | reactive |
|---|---|---|
| 數(shù)據(jù)類型 | 基本類型 + 對象/數(shù)組（自動解包） | 僅對象/數(shù)組 |
| 響應式原理 | 通過 .value 觸發(fā)響應 | 直接代理對象 |
| 模板中使用 | 自動解包（無需 .value） | 直接訪問屬性 |
| 解構(gòu)/傳遞 | 保持響應性 | 需用 toRefs 保持響應性 |
二、使用場景與案例
1. ref 的典型場景
(1) 管理基本類型值
import { ref } from 'vue'
// 計數(shù)器（數(shù)字）
const count = ref(0)
const increment = () => {
count.value++ // 修改值必須用 .value
}
// 開關(guān)狀態(tài)（布爾值）
const isOpen = ref(false)
const toggle = () => {
isOpen.value = !isOpen.value
}(2) 引用 DOM 元素
<template>
<input ref="inputRef" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
const inputRef = ref(null)
onMounted(() => {
inputRef.value.focus() // 訪問 DOM 元素
})
</script>(3) 需要整體替換對象/數(shù)組
const user = ref({ name: 'Alice', age: 25 })
// 替換整個對象
user.value = { name: 'Bob', age: 30 }
const list = ref(['apple', 'banana'])
// 替換整個數(shù)組
list.value = ['orange', 'grape']2. reactive 的典型場景
(1) 復雜表單對象
import { reactive } from 'vue'
const form = reactive({
username: '',
password: '',
rememberMe: false
})
// 直接修改屬性（無需 .value）
form.username = 'John'(2) 嵌套數(shù)據(jù)結(jié)構(gòu)
const nestedData = reactive({
user: {
profile: {
name: 'Alice',
address: {
city: 'Shanghai'
}
}
}
})
// 深層嵌套修改仍保持響應性
nestedData.user.profile.address.city = 'Beijing'(3) 數(shù)組操作
const items = reactive(['a', 'b', 'c'])
// 直接修改元素
items[0] = 'z' // 響應式更新
items.push('d') // 使用數(shù)組方法三、關(guān)鍵操作指南
1. 正確賦值/修改
ref 示例：
const count = ref(0) // ? 正確修改 count.value = 10 // ? 錯誤！直接賦值會覆蓋 ref 對象 count = 10
reactive 示例：
const state = reactive({ count: 0 })
// ? 正確修改屬性
state.count = 10
// ? 錯誤！直接替換對象會失去響應性
state = { count: 20 }
// ? 保持響應性的對象替換方式
Object.assign(state, { count: 20 })2. 處理響應式丟失
(1) 解構(gòu) reactive 對象
const state = reactive({ x: 1, y: 2 })
// ? 解構(gòu)后失去響應性
const { x, y } = state
// ? 使用 toRefs 保持響應性
const { x, y } = toRefs(state)
x.value = 10 // 現(xiàn)在修改有效(2) 函數(shù)間傳遞
// ? 傳遞整個 reactive 對象
const user = reactive({ name: 'Alice' })
updateUser(user)
function updateUser(userObj) {
userObj.name = 'Bob' // 修改仍響應
}
// ? 傳遞 ref 對象
const count = ref(0)
increment(count)
function increment(numRef) {
numRef.value++
}四、性能與最佳實踐
優(yōu)先選擇：
- 基本類型 →
ref - 復雜對象 →
reactive - 需要靈活替換 →
ref（即使存儲對象）
注意事項：
- 避免在
reactive中嵌套ref（除非明確需要） - 對數(shù)組進行索引操作時，建議使用變更方法（
push/pop等） - 大型數(shù)據(jù)集考慮
shallowRef/shallowReactive提升性能
五、綜合對比案例
<script setup>
import { ref, reactive } from 'vue'
// ref 管理用戶ID（基本類型）
const userId = ref(123)
// reactive 管理用戶詳情（對象）
const userDetail = reactive({
name: 'Alice',
permissions: ['read', 'write']
})
// 修改操作示例
const updateUser = () => {
// 修改 ref
userId.value = 456
// 修改 reactive 對象
userDetail.name = 'Bob'
userDetail.permissions.push('delete')
}
// 替換整個對象的最佳實踐
const resetUser = () => {
// ref 可以直接替換
userId.value = 0
// reactive 應該合并屬性而非直接賦值
Object.assign(userDetail, {
name: 'Guest',
permissions: []
})
}
</script>通過以上案例可以看出：ref 更適合管理獨立值和需要完全替換的場景，而 reactive 在處理復雜對象結(jié)構(gòu)時更直觀。根據(jù)具體需求靈活選擇，可顯著提升代碼可維護性。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue用ant design中table表格,點擊某行時觸發(fā)的事件操作
這篇文章主要介紹了vue用ant design中table表格,點擊某行時觸發(fā)的事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果
這篇文章主要介紹了vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue elementUI 自定義表單模板組件功能實現(xiàn)
在項目開發(fā)中，我們會遇到這種需求，在管理后臺添加自定義表單，在指定的頁面使用定義好的表單，這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12
相信現(xiàn)在很多人都是用Vue做過了各種項目,但是項目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點,這篇文章主要給大家介紹了關(guān)于Vue項目優(yōu)化打包的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
基于Vue2.0+ElementUI實現(xiàn)表格翻頁功能
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實現(xiàn)的組件庫，它面向企業(yè)級的后臺應用，能夠幫助你快速地搭建網(wǎng)站，極大地減少研發(fā)的人力與時間成本。這篇文章主要介紹了Vue2.0+ElementUI實現(xiàn)表格翻頁功能,需要的朋友可以參考下2017-10-10
這篇文章給大家介紹了Vue使用v-bind動態(tài)綁定CSS樣式,文中有相關(guān)的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
簡單實現(xiàn)Vue的observer和watcher
這篇文章主要教大家如何簡單實現(xiàn)Vue的observer和watcher，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了vue調(diào)用語音播放的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Monaco-editor,一個vs?code?編輯器,這篇文章主要為大家詳細介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01