Vue 中 ref 和 reactive 有什么區(qū)別該用哪個(gè)一句話(huà)總結(jié)ref 適合「基本類(lèi)型 需要重新賦值」的場(chǎng)景reactive 適合「對(duì)象/數(shù)組 不需要整體替換」的場(chǎng)景。記不住基本類(lèi)型用 ref對(duì)象用 reactive需要整體替換的用 ref 包對(duì)象就這么簡(jiǎn)單正文目錄ref 和 reactive 的核心區(qū)別是什么5 大高頻場(chǎng)景 代碼示例萬(wàn)能兜底ref vs reactive 決策表預(yù)防 checklist不再踩坑一句話(huà)總結(jié)一、ref 和 reactive 的核心區(qū)別是什么問(wèn)題背景Vue 3 的響應(yīng)式系統(tǒng)基于Proxy提供了ref和reactive兩種創(chuàng)建響應(yīng)式數(shù)據(jù)的 API很多開(kāi)發(fā)者分不清什么時(shí)候用哪個(gè)。對(duì)比項(xiàng)refreactive支持類(lèi)型任意類(lèi)型基本類(lèi)型 對(duì)象僅對(duì)象/數(shù)組訪(fǎng)問(wèn)方式.value模板中自動(dòng)解包直接訪(fǎng)問(wèn)屬性重新賦值? 直接xxx.value newVal? 丟失響應(yīng)式解構(gòu)需要配合toRefs直接解構(gòu)會(huì)丟失響應(yīng)式模板中使用自動(dòng)解包無(wú)需.value直接使用深層響應(yīng)? 默認(rèn)深層? 默認(rèn)深層import{ref,reactive}fromvue// ? ref基本類(lèi)型constcountref(0)count.value// JS 中需要 .value// 模板中{{ count }} 自動(dòng)解包不需要 .value// ? reactive對(duì)象conststatereactive({name:Claw,age:3})state.age4// 直接修改屬性// ? reactive 整體替換 → 丟失響應(yīng)式statereactive({name:New,age:5})// 不報(bào)錯(cuò)但響應(yīng)式斷了二、5 大高頻場(chǎng)景 代碼示例場(chǎng)景 1計(jì)數(shù)器 / 開(kāi)關(guān) → 用 ref基本類(lèi)型需要頻繁修改用 ref 最直觀。// ? 正確基本類(lèi)型用 refconstisLoadingref(false)constcountref(0)constmessageref(hello)functiontoggle(){isLoading.value!isLoading.value}// ? 錯(cuò)誤reactive 不支持基本類(lèi)型constcountreactive(0)// Vue 警告value should be an object場(chǎng)景 2表單對(duì)象 → 用 reactive多個(gè)關(guān)聯(lián)字段組成一個(gè)對(duì)象不需要整體替換用 reactive 更自然。script setup import { reactive } from vue // ? 表單對(duì)象用 reactive const form reactive({ username: , password: , remember: false }) function submit() { console.log(form.username, form.password) } function reset() { // ?? 逐字段重置不能整體替換 form.username form.password form.remember false } /script// ? 錯(cuò)誤整體替換丟失響應(yīng)式functionreset(){form{username:,password:,remember:false}// 響應(yīng)式斷了}場(chǎng)景 3需要整體替換的對(duì)象 → 用 ref從接口拿數(shù)據(jù)后整體賦值用 ref 包對(duì)象更安全。// ? 正確接口數(shù)據(jù)用 ref方便整體替換constuserInforef(null)asyncfunctionfetchUser(){constresawaitapi.getUser()userInfo.valueres.data// ? 整體替換沒(méi)問(wèn)題}// ? 麻煩reactive 要逐字段賦值constuserInforeactive({})asyncfunctionfetchUser(){constresawaitapi.getUser()Object.assign(userInfo,res.data)// 能用但啰嗦// 或者逐字段userInfo.name res.data.name ...}場(chǎng)景 4解構(gòu)響應(yīng)式對(duì)象 → 用 toRefs 配合 reactivereactive 解構(gòu)后會(huì)丟失響應(yīng)式必須用toRefs包裝。script setup import { reactive, toRefs } from vue const state reactive({ name: Claw, age: 3 }) // ? 直接解構(gòu)丟失響應(yīng)式 // const { name, age } state // ? toRefs 解構(gòu)保持響應(yīng)式 const { name, age } toRefs(state) /script// ref 則不需要 toRefsconstcountref(0)// 模板中直接用 {{ count }}無(wú)需解構(gòu)場(chǎng)景 5watch 監(jiān)聽(tīng) → ref 和 reactive 行為不同import{ref,reactive,watch}fromvue// ? refwatch 默認(rèn)監(jiān)聽(tīng) .value 的變化constcountref(0)watch(count,(newVal,oldVal){console.log(${oldVal}→${newVal})})// ? reactivewatch 默認(rèn)深層監(jiān)聽(tīng)conststatereactive({count:0})watch(state,(newVal){console.log(state changed,newVal.count)})// ?? watch reactive 的某個(gè)屬性 → 需要用 getterwatch(()state.count,(newVal,oldVal){console.log(${oldVal}→${newVal})})// ?? ref 包對(duì)象 → 默認(rèn)不深層監(jiān)聽(tīng)需要 deepconstobjref({count:0})watch(obj,(newVal){console.log(newVal)// obj.value {} 時(shí)觸發(fā)},{deep:true})// 修改 obj.value.count 需要 deep三、萬(wàn)能兜底ref vs reactive 決策表場(chǎng)景用什么原因基本類(lèi)型string/number/booleanrefreactive 不支持基本類(lèi)型獨(dú)立的對(duì)象/數(shù)組不需要整體替換reactive訪(fǎng)問(wèn)自然不需要.value接口返回的數(shù)據(jù)需要整體替換ref可以直接xxx.value newData表單對(duì)象reactive字段關(guān)聯(lián)逐字段操作需要解構(gòu)使用的對(duì)象reactivetoRefsref 不需要解構(gòu)定時(shí)器/ DOM 引用ref存任意值不觸發(fā)渲染組合式函數(shù)返回值ref調(diào)用方可以解構(gòu)后保持響應(yīng)式萬(wàn)能決策流程是基本類(lèi)型嗎 → 是 → 用 ref → 否 → 需要整體替換嗎 → 是 → 用 ref包對(duì)象 → 否 → 用 reactive// 萬(wàn)能模板import{ref,reactive}fromvue// 基本類(lèi)型constloadingref(false)consttotalref(0)// 對(duì)象 - 不需要整體替換constformreactive({name:,email:})// 對(duì)象 - 需要整體替換接口數(shù)據(jù)constlistref([])asyncfunctionloadData(){list.valueawaitapi.getList()}四、預(yù)防 checklist不再踩坑基本類(lèi)型必須用ref不要用reactivereactive對(duì)象不要整體替換用Object.assign或逐字段賦值接口數(shù)據(jù)整體賦值 → 用ref包對(duì)象解構(gòu)reactive→ 必須用toRefs或toRef模板中ref自動(dòng)解包JS 中必須.valuewatch監(jiān)聽(tīng)reactive屬性 → 用 getter 函數(shù)() state.xxxwatch監(jiān)聽(tīng)ref對(duì)象的深層變化 → 加{ deep: true }組合式函數(shù)返回值優(yōu)先用ref方便調(diào)用方解構(gòu)五、一句話(huà)總結(jié)基本類(lèi)型用 ref固定結(jié)構(gòu)對(duì)象用 reactive需要整體替換的對(duì)象用 ref 包裹——記不住就看要不要重新賦值要重新賦值就用 ref。最后問(wèn)候親愛(ài)的朋友們并邀請(qǐng)你們閱讀我的全新著作 《Vue.js 3企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)實(shí)戰(zhàn)微課視頻版》