式進(jìn)階：toRef、toRefs與toRaw核心原理與應(yīng)用場景)
1. 從“響應(yīng)式”到“引用”為什么需要to系列全家桶如果你已經(jīng)開始上手Vue 3肯定對ref和reactive這兩個創(chuàng)建響應(yīng)式數(shù)據(jù)的核心API不陌生。ref用來包裝基本類型reactive用來包裝對象。但在實際開發(fā)中尤其是處理組件間通信、組合式函數(shù)復(fù)用或者與第三方非響應(yīng)式庫交互時你可能會遇到一些棘手的情況你有一個響應(yīng)式對象但只想把它的某個屬性單獨(dú)傳遞給一個子組件并且希望這個屬性在子組件里也是響應(yīng)式的。你從reactive對象中解構(gòu)出了一個屬性卻發(fā)現(xiàn)這個屬性失去了響應(yīng)性視圖不再更新。你需要將一個響應(yīng)式對象傳遞給一個明確要求“原始、非響應(yīng)式”數(shù)據(jù)的函數(shù)比如一個純計算函數(shù)或者一個第三方工具庫。這些問題正是Vue 3提供的toRef、toRefs和toRaw這三個工具函數(shù)我們戲稱為“to系列全家桶”所要解決的。它們不創(chuàng)建新的響應(yīng)式數(shù)據(jù)而是充當(dāng)“轉(zhuǎn)換器”或“連接器”在響應(yīng)式世界和普通JavaScript世界之間架起橋梁。理解它們是寫出高效、清晰Vue 3代碼的關(guān)鍵一步能幫你避開很多隱形的“坑”。2. toRef為響應(yīng)式對象的屬性創(chuàng)建一個“引用連接”toRef的作用非常精準(zhǔn)基于一個響應(yīng)式對象必須是reactive創(chuàng)建的為其上的某個屬性創(chuàng)建一個ref引用。這個ref與源屬性保持同步。2.1 核心語法與工作原理它的函數(shù)簽名很簡單import { toRef } from vue const ref toRef(source, key)source: 一個由reactive()創(chuàng)建的響應(yīng)式對象。key: 該對象上屬性的字符串鍵名。返回值一個ref對象其.value屬性指向source[key]。關(guān)鍵點在于“連接”。toRef創(chuàng)建的ref并不是一個獨(dú)立的、擁有自己值的響應(yīng)式變量。它更像是一個“指針”或“代理”直接鏈接到源對象上的那個屬性。修改ref.value等同于直接修改source[key]反之亦然。讓我們通過一個場景來理解。假設(shè)你有一個用戶信息對象你需要在多個地方使用其中的userId。import { reactive, toRef } from vue; // 創(chuàng)建一個響應(yīng)式用戶對象 const user reactive({ id: 1, name: 張三, profile: { age: 25, city: 北京 } }); // 錯誤做法直接解構(gòu)失去響應(yīng)性 // let { id } user; // 此時修改 iduser.id 不會變視圖也不會更新。 // 正確做法使用 toRef 創(chuàng)建連接 const userIdRef toRef(user, id); console.log(userIdRef.value); // 1 console.log(user.id); // 1 // 通過 ref 修改源對象同步更新 userIdRef.value 100; console.log(user.id); // 100 // 直接修改源對象ref 同步更新 user.id 200; console.log(userIdRef.value); // 2002.2 典型應(yīng)用場景與實戰(zhàn)心得場景一向子組件傳遞單個響應(yīng)式屬性這是toRef最常用、價值最高的場景。當(dāng)父組件有一個復(fù)雜的響應(yīng)式對象但子組件只需要其中的一兩個屬性時直接傳遞整個對象可能造成不必要的依賴追蹤和性能開銷也破壞了組件的封裝性。!-- ParentComponent.vue -- script setup import { reactive, toRef } from vue; import ChildComponent from ./ChildComponent.vue; const formState reactive({ username: , password: , rememberMe: false, // ... 其他很多字段 }); // 只將 username 作為響應(yīng)式引用傳遞給子組件 const usernameRef toRef(formState, username); /script template ChildComponent :usernameusernameRef / /template!-- ChildComponent.vue -- script setup defineProps([username]); // 接收到的 username 是一個 ref /script template input v-modelusername.value / /template實操心得這里有一個小細(xì)節(jié)。在子組件模板中直接使用v-modelusername.value在語法上可行但觀感不佳。更優(yōu)雅的做法是在子組件內(nèi)使用computed的getter/setter或者利用Vue 3.3的defineModel宏如果項目已升級。但無論如何toRef確保了父組件formState.username的任何變化都能同步到子組件反之亦然且子組件無法意外修改formState的其他屬性。場景二在組合式函數(shù)Composables中返回特定屬性編寫可復(fù)用的組合式函數(shù)時我們可能只想暴露內(nèi)部響應(yīng)式狀態(tài)的某個特定部分而不是整個狀態(tài)對象。// useCounter.js import { reactive, toRef } from vue; export function useCounter(initialValue 0) { const state reactive({ count: initialValue, // 內(nèi)部可能還有其他狀態(tài)如歷史記錄、步長等 _internalFlag: true }); function increment() { state.count; } // 只對外暴露 count 和 increment 方法 // 使用 toRef 確保外部獲取的 count 是響應(yīng)式且與內(nèi)部 state.count 連接 return { count: toRef(state, count), increment }; }!-- MyComponent.vue -- script setup import { useCounter } from ./useCounter; const { count, increment } useCounter(); // 此時 count 是一個 ref與組合式函數(shù)內(nèi)部的 state.count 保持連接 /script注意事項toRef只能用于reactive創(chuàng)建的響應(yīng)式對象。如果你嘗試對一個普通對象或一個ref使用toRef它不會報錯但創(chuàng)建出來的引用不會是響應(yīng)式的因為它失去了與響應(yīng)式系統(tǒng)的連接。這是一個常見的隱形錯誤來源。務(wù)必確保source參數(shù)是reactive的產(chǎn)物。3. toRefs一鍵解構(gòu)響應(yīng)式對象而不失響應(yīng)性如果說toRef是“單點連接”那么toRefs就是“批量連接”。它接收一個reactive響應(yīng)式對象并返回一個普通對象但這個對象的每個屬性都是對應(yīng)源對象屬性的ref引用。3.1 解決響應(yīng)式對象解構(gòu)的痛點在Vue 3的script setup中我們經(jīng)常需要從reactive對象中取出屬性來使用。直接使用ES6的解構(gòu)賦值會“斷開”響應(yīng)式連接。import { reactive } from vue; const state reactive({ foo: 1, bar: 2 }); // 直接解構(gòu)響應(yīng)性丟失 let { foo, bar } state; foo 3; // 這不會觸發(fā)任何更新state.foo 仍然是 1 console.log(state.foo); // 1toRefs就是為了解決這個問題而生的import { reactive, toRefs } from vue; const state reactive({ foo: 1, bar: 2 }); // 使用 toRefs 解構(gòu)每個屬性都是 ref保持響應(yīng)性 const { foo, bar } toRefs(state); foo.value 3; // 通過 .value 修改 console.log(state.foo); // 3源對象同步更新 state.bar 4; // 直接修改源對象 console.log(bar.value); // 4ref 同步更新3.2 在組合式函數(shù)與模板中的最佳實踐toRefs在組合式函數(shù)中的使用幾乎是標(biāo)配。它讓你可以像使用普通對象一樣解構(gòu)返回值同時每個屬性都保持響應(yīng)式。// useMouse.js import { reactive, onMounted, onUnmounted, toRefs } from vue; export function useMouse() { const state reactive({ x: 0, y: 0 }); function update(event) { state.x event.pageX; state.y event.pageY; } onMounted(() window.addEventListener(mousemove, update)); onUnmounted(() window.removeEventListener(mousemove, update)); // 將整個響應(yīng)式對象轉(zhuǎn)換為 refs 對象返回 return toRefs(state); }!-- MyComponent.vue -- script setup import { useMouse } from ./useMouse; // 可以像解構(gòu)普通對象一樣使用且 x, y 都是響應(yīng)式的 ref const { x, y } useMouse(); /script template div鼠標(biāo)位置{{ x }}, {{ y }}/div /template在模板中由于Vue的自動解包特性你可以直接使用{{ x }}而不是{{ x.value }}這讓代碼非常簡潔。踩坑實錄與技巧性能考量toRefs會遍歷對象的所有可枚舉屬性并為每個創(chuàng)建ref。如果對象非常大例如一個包含數(shù)千項的長列表這可能會產(chǎn)生不必要的開銷。在這種情況下考慮是否真的需要解構(gòu)所有屬性或者是否可以使用toRef只提取需要的部分。與reactive的取舍在組合式函數(shù)內(nèi)部我個人的習(xí)慣是如果狀態(tài)邏輯簡單屬性較少且確定需要全部暴露優(yōu)先使用ref。因為ref管理起來更直觀toRefs也多了一層轉(zhuǎn)換。但如果狀態(tài)復(fù)雜屬性間關(guān)聯(lián)緊密如表單對象使用reactive組織會更清晰再通過toRefs暴露。處理嵌套對象toRefs是“淺層”轉(zhuǎn)換。它只轉(zhuǎn)換源對象的第一層屬性為ref。如果屬性值本身又是一個reactive對象轉(zhuǎn)換后得到的ref.value指向的仍然是那個響應(yīng)式對象而不是它的屬性被轉(zhuǎn)成了ref。這一點需要留意。4. toRaw重返“原始世界”應(yīng)對特殊場景toRaw是“to系列”中比較特殊的一個它的作用與toRef/toRefs相反返回一個reactive或readonly代理對象的原始普通對象。4.1 理解響應(yīng)式代理與原始對象當(dāng)你使用reactive(obj)時Vue返回的不是obj本身而是它的一個Proxy代理。這個代理攔截了所有針對obj的讀寫操作從而實現(xiàn)了依賴追蹤和觸發(fā)更新。toRaw就是用來獲取被代理的那個原始對象。import { reactive, toRaw } from vue; const original { foo: 1 }; const reactiveObj reactive(original); console.log(reactiveObj); // Proxy {foo: 1} console.log(toRaw(reactiveObj)); // {foo: 1} console.log(toRaw(reactiveObj) original); // true4.2 何時需要使用toRaw場景一性能關(guān)鍵操作避免觸發(fā)不必要的副作用當(dāng)你需要對一個響應(yīng)式對象進(jìn)行一系列密集的讀取或計算但明確知道在這期間不需要觸發(fā)任何依賴更新比如視圖渲染、watch監(jiān)聽時使用原始對象可以繞過Proxy的攔截獲得微小的性能提升。這在處理大型數(shù)據(jù)集時可能有一定意義。const bigList reactive([...]); // 一個巨大的響應(yīng)式數(shù)組 // 如果只是進(jìn)行純數(shù)據(jù)計算不關(guān)心更新 const rawList toRaw(bigList); const sum rawList.reduce((a, b) a b.value, 0); // 直接操作原始數(shù)組場景二與第三方庫或API集成許多第三方庫如圖表庫D3.js、工具函數(shù)庫Lodash的某些方法并不期望接收一個Proxy對象。它們可能直接通過for...in、Object.keys()或JSON.stringify來操作對象這可能會與Vue的響應(yīng)式代理產(chǎn)生意料之外的行為盡管Vue的Proxy實現(xiàn)已經(jīng)處理了大部分常見情況。為了絕對兼容在傳遞數(shù)據(jù)給這些庫之前使用toRaw獲取原始數(shù)據(jù)是更安全的選擇。import { reactive, toRaw } from vue; import * as d3 from d3; const chartData reactive({ nodes: [...], links: [...] }); // 將原始數(shù)據(jù)傳遞給D3進(jìn)行繪圖 d3.forceSimulation(toRaw(chartData.nodes)) .force(link, d3.forceLink(toRaw(chartData.links)));場景三實現(xiàn)不可變數(shù)據(jù)快照或深比較有時你需要獲取響應(yīng)式對象在某個時間點的“快照”用于對比或持久化。直接對響應(yīng)式對象進(jìn)行JSON.parse(JSON.stringify(...))或展開運(yùn)算符{...obj}操作的是代理對象雖然能得到一個普通對象但過程可能觸發(fā)代理的getter。使用toRaw先獲取原始對象再進(jìn)行復(fù)制邏輯上更清晰也略微更高效。const state reactive({ a: 1, b: { c: 2 } }); // 獲取當(dāng)前狀態(tài)的快照淺拷貝 const snapshot { ...toRaw(state) }; // 或者深拷貝 const deepSnapshot JSON.parse(JSON.stringify(toRaw(state)));重要警告toRaw返回的原始對象與響應(yīng)式對象是同一份數(shù)據(jù)。修改原始對象會直接修改源數(shù)據(jù)并且這些修改不會觸發(fā)Vue的響應(yīng)式更新這非常危險因為它破壞了數(shù)據(jù)流的可預(yù)測性。視圖和其他依賴此響應(yīng)式數(shù)據(jù)的地方將不會自動更新可能導(dǎo)致UI狀態(tài)與實際數(shù)據(jù)不一致。因此除非你非常清楚自己在做什么并且有充分的理由如上述性能或集成場景否則應(yīng)避免直接操作toRaw返回的對象。這是一個“逃生艙口”應(yīng)謹(jǐn)慎使用。5. 綜合對比與選擇指南為了更清晰地理解這三個API的異同我們通過一個表格來總結(jié)特性toReftoRefstoRaw作用為響應(yīng)式對象的單個屬性創(chuàng)建ref引用將響應(yīng)式對象的所有屬性轉(zhuǎn)換為ref引用對象獲取響應(yīng)式代理背后的原始普通對象輸入(reactiveObj, key)reactiveObjreactiveObj或readonlyObj輸出一個Ref對象一個普通對象其屬性均為Ref原始普通對象響應(yīng)性輸出ref是響應(yīng)式的與源屬性雙向同步輸出對象的每個屬性ref都是響應(yīng)式的與源屬性雙向同步輸出對象非響應(yīng)式修改它不會觸發(fā)更新主要用途1. 向子組件傳遞單個響應(yīng)式屬性2. 組合式函數(shù)中精確暴露狀態(tài)1. 解構(gòu)reactive對象而不失響應(yīng)性2. 組合式函數(shù)返回所有狀態(tài)1. 性能關(guān)鍵操作繞過代理2. 與不兼容Proxy的第三方庫集成3. 獲取數(shù)據(jù)快照核心關(guān)系建立屬性級別的“連接”建立對象級別的“批量連接”斷開連接返回“本源”如何選擇一個簡單的決策流你想從reactive對象中取出屬性使用嗎是只取一個特定屬性- 使用toRef。是需要取出大部分或全部屬性- 使用toRefs然后解構(gòu)。否- 進(jìn)入下一步。你需要將響應(yīng)式數(shù)據(jù)傳遞給一個明確要求原始數(shù)據(jù)、或可能不兼容Proxy的外部函數(shù)嗎是- 使用toRaw獲取原始對象后傳遞。切記后續(xù)修改需謹(jǐn)慎否- 你很可能不需要to系列函數(shù)直接使用ref或reactive即可。6. 常見誤區(qū)與深度解析6.1 toRef vs. 普通賦值或解構(gòu)這是新手最容易混淆的地方。我們通過代碼來直觀感受const state reactive({ a: 1, b: 2 }); // 方式一普通賦值 (失去響應(yīng)性) let a1 state.a; a1 100; // state.a 還是 1 // 方式二解構(gòu)賦值 (失去響應(yīng)性) let { a: a2 } state; a2 200; // state.a 還是 1 // 方式三toRef (保持響應(yīng)性) const aRef toRef(state, a); aRef.value 300; // state.a 變成 300 state.a 400; // aRef.value 變成 400根本原因普通賦值和解構(gòu)是值的拷貝對于對象屬性是引用地址的拷貝。你得到了一個全新的變量它初始值和state.a相同但此后與state.a再無瓜葛。而toRef創(chuàng)建的是一個“響應(yīng)式引用”它內(nèi)部通過getter/setter始終指向state.a的內(nèi)存地址。6.2 響應(yīng)式丟失的隱形陷阱嵌套對象與toRefs如前所述toRefs是淺層的?？聪旅孢@個例子const state reactive({ user: { name: Alice, age: 30 } }); const { user } toRefs(state); // user 是一個 ref console.log(user.value); // { name: Alice, age: 30 } 這是一個普通對象嗎不 // user.value 實際上指向的是 state.user而 state.user 本身沒有被 reactive 包裹嗎 // 我們看看 state 的定義state 是 reactive 的但 state.user 這個屬性值是一個普通對象。 // 然而當(dāng)你通過 reactive 代理訪問 state.user 時Vue 會返回它的響應(yīng)式代理。 // 所以 user.value 實際上是一個響應(yīng)式代理對象。 // 如果你想對 user 的 name 屬性單獨(dú)創(chuàng)建 ref你需要 const userNameRef toRef(user.value, name); // 注意source 是 user.value (響應(yīng)式代理) // 或者更直接的如果知道結(jié)構(gòu) const userNameRef toRef(state.user, name);這里的關(guān)鍵是理解reactive的“深層”響應(yīng)式。state.user在state被reactive包裹時其值那個{name: ‘Alice‘, age: 30}對象也被遞歸地轉(zhuǎn)換成了響應(yīng)式代理。所以user.value拿到的是一個響應(yīng)式對象。toRefs(state)只保證了user這個ref指向正確但沒有也無法把user內(nèi)部的name和age也變成ref。如果你需要深層次的ref化需要手動處理或使用其他工具。6.3 在watch和computed中的行為toRef創(chuàng)建的ref可以像普通ref一樣被watch和computed觀察。const state reactive({ count: 0 }); const countRef toRef(state, count); watch(countRef, (newVal) { console.log(countRef changed to: ${newVal}); }); // 無論是修改 countRef.value 還是 state.countwatch都會觸發(fā)。 const doubleCount computed(() countRef.value * 2);對于toRefs返回的對象你可以直接解構(gòu)出其屬性ref進(jìn)行觀察。const { count } toRefs(state); watch(count, (newVal) { ... });7. 性能考量與最佳實踐建議按需使用不要濫用toRefs。如果一個組合式函數(shù)內(nèi)部狀態(tài)很復(fù)雜但外部只用到一兩個屬性用toRef精確暴露比用toRefs全部轉(zhuǎn)換更高效。區(qū)分讀寫意圖如果傳遞給子組件的屬性子組件只需要讀取而不需要修改考慮使用computed返回一個只讀的引用或者直接傳遞props而不使用ref這更符合單向數(shù)據(jù)流的思想。謹(jǐn)慎使用toRaw牢記toRaw是“逃生艙口”。除非遇到明確的性能瓶頸或第三方庫兼容性問題否則優(yōu)先考慮在響應(yīng)式系統(tǒng)內(nèi)解決問題。直接操作原始對象是許多難以調(diào)試的Bug的根源。結(jié)合TypeScript在使用TypeScript時toRef和toRefs能提供良好的類型推斷。但要注意toRefs返回的對象類型是ToRefsT它會將T的所有屬性類型轉(zhuǎn)換為RefT[K]。這有時需要你手動處理嵌套對象的類型。測試由于toRef和toRefs建立了連接在編寫單元測試時直接修改源對象或通過ref修改都應(yīng)該能觸發(fā)相應(yīng)的組件更新或計算屬性重新計算確保你的測試覆蓋了這兩種路徑。toRef,toRefs,toRaw這三個工具函數(shù)是Vue 3響應(yīng)式API體系中的重要拼圖。它們不負(fù)責(zé)創(chuàng)建響應(yīng)性而是負(fù)責(zé)管理響應(yīng)性數(shù)據(jù)的“訪問權(quán)限”和“表現(xiàn)形式”。掌握它們意味著你能更精細(xì)地控制數(shù)據(jù)流寫出耦合度更低、復(fù)用性更高、性能更優(yōu)的Vue 3代碼。從“為什么需要它們”出發(fā)理解其“連接”或“剝離”的本質(zhì)再通過實際場景反復(fù)運(yùn)用你就能在Vue 3的開發(fā)中更加游刃有余。 Vue 3響應(yīng)式進(jìn)階：toRef、toRefs與toRaw核心原理與應(yīng)用場景
1. 從“響應(yīng)式”到“引用”為什么需要to系列全家桶如果你已經(jīng)開始上手Vue 3肯定對ref和reactive這兩個創(chuàng)建響應(yīng)式數(shù)據(jù)的核心API不陌生。ref用來包裝基本類型reactive用來包裝對象。但在實際開發(fā)中尤其是處理組件間通信、組合式函數(shù)復(fù)用或者與第三方非響應(yīng)式庫交互時你可能會遇到一些棘手的情況你有一個響應(yīng)式對象但只想把它的某個屬性單獨(dú)傳遞給一個子組件并且希望這個屬性在子組件里也是響應(yīng)式的。你從reactive對象中解構(gòu)出了一個屬性卻發(fā)現(xiàn)這個屬性失去了響應(yīng)性視圖不再更新。你需要將一個響應(yīng)式對象傳遞給一個明確要求“原始、非響應(yīng)式”數(shù)據(jù)的函數(shù)比如一個純計算函數(shù)或者一個第三方工具庫。這些問題正是Vue 3提供的toRef、toRefs和toRaw這三個工具函數(shù)我們戲稱為“to系列全家桶”所要解決的。它們不創(chuàng)建新的響應(yīng)式數(shù)據(jù)而是充當(dāng)“轉(zhuǎn)換器”或“連接器”在響應(yīng)式世界和普通JavaScript世界之間架起橋梁。理解它們是寫出高效、清晰Vue 3代碼的關(guān)鍵一步能幫你避開很多隱形的“坑”。2. toRef為響應(yīng)式對象的屬性創(chuàng)建一個“引用連接”toRef的作用非常精準(zhǔn)基于一個響應(yīng)式對象必須是reactive創(chuàng)建的為其上的某個屬性創(chuàng)建一個ref引用。這個ref與源屬性保持同步。2.1 核心語法與工作原理它的函數(shù)簽名很簡單import { toRef } from vue const ref toRef(source, key)source: 一個由reactive()創(chuàng)建的響應(yīng)式對象。key: 該對象上屬性的字符串鍵名。返回值一個ref對象其.value屬性指向source[key]。關(guān)鍵點在于“連接”。toRef創(chuàng)建的ref并不是一個獨(dú)立的、擁有自己值的響應(yīng)式變量。它更像是一個“指針”或“代理”直接鏈接到源對象上的那個屬性。修改ref.value等同于直接修改source[key]反之亦然。讓我們通過一個場景來理解。假設(shè)你有一個用戶信息對象你需要在多個地方使用其中的userId。import { reactive, toRef } from vue; // 創(chuàng)建一個響應(yīng)式用戶對象 const user reactive({ id: 1, name: 張三, profile: { age: 25, city: 北京 } }); // 錯誤做法直接解構(gòu)失去響應(yīng)性 // let { id } user; // 此時修改 iduser.id 不會變視圖也不會更新。 // 正確做法使用 toRef 創(chuàng)建連接 const userIdRef toRef(user, id); console.log(userIdRef.value); // 1 console.log(user.id); // 1 // 通過 ref 修改源對象同步更新 userIdRef.value 100; console.log(user.id); // 100 // 直接修改源對象ref 同步更新 user.id 200; console.log(userIdRef.value); // 2002.2 典型應(yīng)用場景與實戰(zhàn)心得場景一向子組件傳遞單個響應(yīng)式屬性這是toRef最常用、價值最高的場景。當(dāng)父組件有一個復(fù)雜的響應(yīng)式對象但子組件只需要其中的一兩個屬性時直接傳遞整個對象可能造成不必要的依賴追蹤和性能開銷也破壞了組件的封裝性。!-- ParentComponent.vue -- script setup import { reactive, toRef } from vue; import ChildComponent from ./ChildComponent.vue; const formState reactive({ username: , password: , rememberMe: false, // ... 其他很多字段 }); // 只將 username 作為響應(yīng)式引用傳遞給子組件 const usernameRef toRef(formState, username); /script template ChildComponent :usernameusernameRef / /template!-- ChildComponent.vue -- script setup defineProps([username]); // 接收到的 username 是一個 ref /script template input v-modelusername.value / /template實操心得這里有一個小細(xì)節(jié)。在子組件模板中直接使用v-modelusername.value在語法上可行但觀感不佳。更優(yōu)雅的做法是在子組件內(nèi)使用computed的getter/setter或者利用Vue 3.3的defineModel宏如果項目已升級。但無論如何toRef確保了父組件formState.username的任何變化都能同步到子組件反之亦然且子組件無法意外修改formState的其他屬性。場景二在組合式函數(shù)Composables中返回特定屬性編寫可復(fù)用的組合式函數(shù)時我們可能只想暴露內(nèi)部響應(yīng)式狀態(tài)的某個特定部分而不是整個狀態(tài)對象。// useCounter.js import { reactive, toRef } from vue; export function useCounter(initialValue 0) { const state reactive({ count: initialValue, // 內(nèi)部可能還有其他狀態(tài)如歷史記錄、步長等 _internalFlag: true }); function increment() { state.count; } // 只對外暴露 count 和 increment 方法 // 使用 toRef 確保外部獲取的 count 是響應(yīng)式且與內(nèi)部 state.count 連接 return { count: toRef(state, count), increment }; }!-- MyComponent.vue -- script setup import { useCounter } from ./useCounter; const { count, increment } useCounter(); // 此時 count 是一個 ref與組合式函數(shù)內(nèi)部的 state.count 保持連接 /script注意事項toRef只能用于reactive創(chuàng)建的響應(yīng)式對象。如果你嘗試對一個普通對象或一個ref使用toRef它不會報錯但創(chuàng)建出來的引用不會是響應(yīng)式的因為它失去了與響應(yīng)式系統(tǒng)的連接。這是一個常見的隱形錯誤來源。務(wù)必確保source參數(shù)是reactive的產(chǎn)物。3. toRefs一鍵解構(gòu)響應(yīng)式對象而不失響應(yīng)性如果說toRef是“單點連接”那么toRefs就是“批量連接”。它接收一個reactive響應(yīng)式對象并返回一個普通對象但這個對象的每個屬性都是對應(yīng)源對象屬性的ref引用。3.1 解決響應(yīng)式對象解構(gòu)的痛點在Vue 3的script setup中我們經(jīng)常需要從reactive對象中取出屬性來使用。直接使用ES6的解構(gòu)賦值會“斷開”響應(yīng)式連接。import { reactive } from vue; const state reactive({ foo: 1, bar: 2 }); // 直接解構(gòu)響應(yīng)性丟失 let { foo, bar } state; foo 3; // 這不會觸發(fā)任何更新state.foo 仍然是 1 console.log(state.foo); // 1toRefs就是為了解決這個問題而生的import { reactive, toRefs } from vue; const state reactive({ foo: 1, bar: 2 }); // 使用 toRefs 解構(gòu)每個屬性都是 ref保持響應(yīng)性 const { foo, bar } toRefs(state); foo.value 3; // 通過 .value 修改 console.log(state.foo); // 3源對象同步更新 state.bar 4; // 直接修改源對象 console.log(bar.value); // 4ref 同步更新3.2 在組合式函數(shù)與模板中的最佳實踐toRefs在組合式函數(shù)中的使用幾乎是標(biāo)配。它讓你可以像使用普通對象一樣解構(gòu)返回值同時每個屬性都保持響應(yīng)式。// useMouse.js import { reactive, onMounted, onUnmounted, toRefs } from vue; export function useMouse() { const state reactive({ x: 0, y: 0 }); function update(event) { state.x event.pageX; state.y event.pageY; } onMounted(() window.addEventListener(mousemove, update)); onUnmounted(() window.removeEventListener(mousemove, update)); // 將整個響應(yīng)式對象轉(zhuǎn)換為 refs 對象返回 return toRefs(state); }!-- MyComponent.vue -- script setup import { useMouse } from ./useMouse; // 可以像解構(gòu)普通對象一樣使用且 x, y 都是響應(yīng)式的 ref const { x, y } useMouse(); /script template div鼠標(biāo)位置{{ x }}, {{ y }}/div /template在模板中由于Vue的自動解包特性你可以直接使用{{ x }}而不是{{ x.value }}這讓代碼非常簡潔。踩坑實錄與技巧性能考量toRefs會遍歷對象的所有可枚舉屬性并為每個創(chuàng)建ref。如果對象非常大例如一個包含數(shù)千項的長列表這可能會產(chǎn)生不必要的開銷。在這種情況下考慮是否真的需要解構(gòu)所有屬性或者是否可以使用toRef只提取需要的部分。與reactive的取舍在組合式函數(shù)內(nèi)部我個人的習(xí)慣是如果狀態(tài)邏輯簡單屬性較少且確定需要全部暴露優(yōu)先使用ref。因為ref管理起來更直觀toRefs也多了一層轉(zhuǎn)換。但如果狀態(tài)復(fù)雜屬性間關(guān)聯(lián)緊密如表單對象使用reactive組織會更清晰再通過toRefs暴露。處理嵌套對象toRefs是“淺層”轉(zhuǎn)換。它只轉(zhuǎn)換源對象的第一層屬性為ref。如果屬性值本身又是一個reactive對象轉(zhuǎn)換后得到的ref.value指向的仍然是那個響應(yīng)式對象而不是它的屬性被轉(zhuǎn)成了ref。這一點需要留意。4. toRaw重返“原始世界”應(yīng)對特殊場景toRaw是“to系列”中比較特殊的一個它的作用與toRef/toRefs相反返回一個reactive或readonly代理對象的原始普通對象。4.1 理解響應(yīng)式代理與原始對象當(dāng)你使用reactive(obj)時Vue返回的不是obj本身而是它的一個Proxy代理。這個代理攔截了所有針對obj的讀寫操作從而實現(xiàn)了依賴追蹤和觸發(fā)更新。toRaw就是用來獲取被代理的那個原始對象。import { reactive, toRaw } from vue; const original { foo: 1 }; const reactiveObj reactive(original); console.log(reactiveObj); // Proxy {foo: 1} console.log(toRaw(reactiveObj)); // {foo: 1} console.log(toRaw(reactiveObj) original); // true4.2 何時需要使用toRaw場景一性能關(guān)鍵操作避免觸發(fā)不必要的副作用當(dāng)你需要對一個響應(yīng)式對象進(jìn)行一系列密集的讀取或計算但明確知道在這期間不需要觸發(fā)任何依賴更新比如視圖渲染、watch監(jiān)聽時使用原始對象可以繞過Proxy的攔截獲得微小的性能提升。這在處理大型數(shù)據(jù)集時可能有一定意義。const bigList reactive([...]); // 一個巨大的響應(yīng)式數(shù)組 // 如果只是進(jìn)行純數(shù)據(jù)計算不關(guān)心更新 const rawList toRaw(bigList); const sum rawList.reduce((a, b) a b.value, 0); // 直接操作原始數(shù)組場景二與第三方庫或API集成許多第三方庫如圖表庫D3.js、工具函數(shù)庫Lodash的某些方法并不期望接收一個Proxy對象。它們可能直接通過for...in、Object.keys()或JSON.stringify來操作對象這可能會與Vue的響應(yīng)式代理產(chǎn)生意料之外的行為盡管Vue的Proxy實現(xiàn)已經(jīng)處理了大部分常見情況。為了絕對兼容在傳遞數(shù)據(jù)給這些庫之前使用toRaw獲取原始數(shù)據(jù)是更安全的選擇。import { reactive, toRaw } from vue; import * as d3 from d3; const chartData reactive({ nodes: [...], links: [...] }); // 將原始數(shù)據(jù)傳遞給D3進(jìn)行繪圖 d3.forceSimulation(toRaw(chartData.nodes)) .force(link, d3.forceLink(toRaw(chartData.links)));場景三實現(xiàn)不可變數(shù)據(jù)快照或深比較有時你需要獲取響應(yīng)式對象在某個時間點的“快照”用于對比或持久化。直接對響應(yīng)式對象進(jìn)行JSON.parse(JSON.stringify(...))或展開運(yùn)算符{...obj}操作的是代理對象雖然能得到一個普通對象但過程可能觸發(fā)代理的getter。使用toRaw先獲取原始對象再進(jìn)行復(fù)制邏輯上更清晰也略微更高效。const state reactive({ a: 1, b: { c: 2 } }); // 獲取當(dāng)前狀態(tài)的快照淺拷貝 const snapshot { ...toRaw(state) }; // 或者深拷貝 const deepSnapshot JSON.parse(JSON.stringify(toRaw(state)));重要警告toRaw返回的原始對象與響應(yīng)式對象是同一份數(shù)據(jù)。修改原始對象會直接修改源數(shù)據(jù)并且這些修改不會觸發(fā)Vue的響應(yīng)式更新這非常危險因為它破壞了數(shù)據(jù)流的可預(yù)測性。視圖和其他依賴此響應(yīng)式數(shù)據(jù)的地方將不會自動更新可能導(dǎo)致UI狀態(tài)與實際數(shù)據(jù)不一致。因此除非你非常清楚自己在做什么并且有充分的理由如上述性能或集成場景否則應(yīng)避免直接操作toRaw返回的對象。這是一個“逃生艙口”應(yīng)謹(jǐn)慎使用。5. 綜合對比與選擇指南為了更清晰地理解這三個API的異同我們通過一個表格來總結(jié)特性toReftoRefstoRaw作用為響應(yīng)式對象的單個屬性創(chuàng)建ref引用將響應(yīng)式對象的所有屬性轉(zhuǎn)換為ref引用對象獲取響應(yīng)式代理背后的原始普通對象輸入(reactiveObj, key)reactiveObjreactiveObj或readonlyObj輸出一個Ref對象一個普通對象其屬性均為Ref原始普通對象響應(yīng)性輸出ref是響應(yīng)式的與源屬性雙向同步輸出對象的每個屬性ref都是響應(yīng)式的與源屬性雙向同步輸出對象非響應(yīng)式修改它不會觸發(fā)更新主要用途1. 向子組件傳遞單個響應(yīng)式屬性2. 組合式函數(shù)中精確暴露狀態(tài)1. 解構(gòu)reactive對象而不失響應(yīng)性2. 組合式函數(shù)返回所有狀態(tài)1. 性能關(guān)鍵操作繞過代理2. 與不兼容Proxy的第三方庫集成3. 獲取數(shù)據(jù)快照核心關(guān)系建立屬性級別的“連接”建立對象級別的“批量連接”斷開連接返回“本源”如何選擇一個簡單的決策流你想從reactive對象中取出屬性使用嗎是只取一個特定屬性- 使用toRef。是需要取出大部分或全部屬性- 使用toRefs然后解構(gòu)。否- 進(jìn)入下一步。你需要將響應(yīng)式數(shù)據(jù)傳遞給一個明確要求原始數(shù)據(jù)、或可能不兼容Proxy的外部函數(shù)嗎是- 使用toRaw獲取原始對象后傳遞。切記后續(xù)修改需謹(jǐn)慎否- 你很可能不需要to系列函數(shù)直接使用ref或reactive即可。6. 常見誤區(qū)與深度解析6.1 toRef vs. 普通賦值或解構(gòu)這是新手最容易混淆的地方。我們通過代碼來直觀感受const state reactive({ a: 1, b: 2 }); // 方式一普通賦值 (失去響應(yīng)性) let a1 state.a; a1 100; // state.a 還是 1 // 方式二解構(gòu)賦值 (失去響應(yīng)性) let { a: a2 } state; a2 200; // state.a 還是 1 // 方式三toRef (保持響應(yīng)性) const aRef toRef(state, a); aRef.value 300; // state.a 變成 300 state.a 400; // aRef.value 變成 400根本原因普通賦值和解構(gòu)是值的拷貝對于對象屬性是引用地址的拷貝。你得到了一個全新的變量它初始值和state.a相同但此后與state.a再無瓜葛。而toRef創(chuàng)建的是一個“響應(yīng)式引用”它內(nèi)部通過getter/setter始終指向state.a的內(nèi)存地址。6.2 響應(yīng)式丟失的隱形陷阱嵌套對象與toRefs如前所述toRefs是淺層的?？聪旅孢@個例子const state reactive({ user: { name: Alice, age: 30 } }); const { user } toRefs(state); // user 是一個 ref console.log(user.value); // { name: Alice, age: 30 } 這是一個普通對象嗎不 // user.value 實際上指向的是 state.user而 state.user 本身沒有被 reactive 包裹嗎 // 我們看看 state 的定義state 是 reactive 的但 state.user 這個屬性值是一個普通對象。 // 然而當(dāng)你通過 reactive 代理訪問 state.user 時Vue 會返回它的響應(yīng)式代理。 // 所以 user.value 實際上是一個響應(yīng)式代理對象。 // 如果你想對 user 的 name 屬性單獨(dú)創(chuàng)建 ref你需要 const userNameRef toRef(user.value, name); // 注意source 是 user.value (響應(yīng)式代理) // 或者更直接的如果知道結(jié)構(gòu) const userNameRef toRef(state.user, name);這里的關(guān)鍵是理解reactive的“深層”響應(yīng)式。state.user在state被reactive包裹時其值那個{name: ‘Alice‘, age: 30}對象也被遞歸地轉(zhuǎn)換成了響應(yīng)式代理。所以user.value拿到的是一個響應(yīng)式對象。toRefs(state)只保證了user這個ref指向正確但沒有也無法把user內(nèi)部的name和age也變成ref。如果你需要深層次的ref化需要手動處理或使用其他工具。6.3 在watch和computed中的行為toRef創(chuàng)建的ref可以像普通ref一樣被watch和computed觀察。const state reactive({ count: 0 }); const countRef toRef(state, count); watch(countRef, (newVal) { console.log(countRef changed to: ${newVal}); }); // 無論是修改 countRef.value 還是 state.countwatch都會觸發(fā)。 const doubleCount computed(() countRef.value * 2);對于toRefs返回的對象你可以直接解構(gòu)出其屬性ref進(jìn)行觀察。const { count } toRefs(state); watch(count, (newVal) { ... });7. 性能考量與最佳實踐建議按需使用不要濫用toRefs。如果一個組合式函數(shù)內(nèi)部狀態(tài)很復(fù)雜但外部只用到一兩個屬性用toRef精確暴露比用toRefs全部轉(zhuǎn)換更高效。區(qū)分讀寫意圖如果傳遞給子組件的屬性子組件只需要讀取而不需要修改考慮使用computed返回一個只讀的引用或者直接傳遞props而不使用ref這更符合單向數(shù)據(jù)流的思想。謹(jǐn)慎使用toRaw牢記toRaw是“逃生艙口”。除非遇到明確的性能瓶頸或第三方庫兼容性問題否則優(yōu)先考慮在響應(yīng)式系統(tǒng)內(nèi)解決問題。直接操作原始對象是許多難以調(diào)試的Bug的根源。結(jié)合TypeScript在使用TypeScript時toRef和toRefs能提供良好的類型推斷。但要注意toRefs返回的對象類型是ToRefsT它會將T的所有屬性類型轉(zhuǎn)換為RefT[K]。這有時需要你手動處理嵌套對象的類型。測試由于toRef和toRefs建立了連接在編寫單元測試時直接修改源對象或通過ref修改都應(yīng)該能觸發(fā)相應(yīng)的組件更新或計算屬性重新計算確保你的測試覆蓋了這兩種路徑。toRef,toRefs,toRaw這三個工具函數(shù)是Vue 3響應(yīng)式API體系中的重要拼圖。它們不負(fù)責(zé)創(chuàng)建響應(yīng)性而是負(fù)責(zé)管理響應(yīng)性數(shù)據(jù)的“訪問權(quán)限”和“表現(xiàn)形式”。掌握它們意味著你能更精細(xì)地控制數(shù)據(jù)流寫出耦合度更低、復(fù)用性更高、性能更優(yōu)的Vue 3代碼。從“為什么需要它們”出發(fā)理解其“連接”或“剝離”的本質(zhì)再通過實際場景反復(fù)運(yùn)用你就能在Vue 3的開發(fā)中更加游刃有余。