Vue.js 響應式系統：追蹤每一個變量變化
你是否體驗過那種神奇的感覺：在 Vue 中更改數據時，UI 就自動...更新了？不需要手動操作 DOM，不需要事件監聽器，什么都不需要。就是純粹而美妙的響應式。但你是否曾想過，這背后到底發生了什么？Vue 是如何知道你的數據何時發生變化的？
今天，我們將深入探討 Vue 的響應式系統——這個讓你應用充滿活力的隱形引擎。相信我，一旦你理解了它的工作原理，你會對 Vue 有一個全新的認識。
Vue 解決的問題（你可能甚至沒有意識到）
讓我們從一個簡單的事實開始：JavaScript 本身并不是響應式的。如果你這樣寫：
let total = 0
let price = 10
let quantity = 2
total = price * quantity
console.log(total) // 20
price = 15
console.log(total) // 仍然是 20... ??當 price 變化時，total 并不會神奇地更新。這是 JavaScript 的正常行為，但這不是我們在現代 Web 應用中所期望的。我們希望 UI 能自動與數據保持同步。
Vue 通過創建我稱之為"依賴網絡"的系統來解決這個問題——一個能精確知道應用哪些部分依賴于哪些數據的系統。當數據變化時，Vue 可以立即通知所有關心這個變化的組件。
引入 Proxy：Vue 的秘密武器
Vue 3 的響應式系統建立在 JavaScript Proxy 之上——這是一個強大的 ES6 特性，允許你攔截和自定義對對象的操作（如屬性訪問和賦值）。
可以把 Proxy 想象成位于你的代碼和數據之間的中間人：
// Vue 創建響應式數據的簡化版本
functionreactive(obj) {
returnnewProxy(obj, {
get(target, key) {
// "嘿 Vue，有人在讀取這個屬性！"
track(target, key)
return target[key]
},
set(target, key, value) {
// "嘿 Vue，有人在修改這個屬性！"
target[key] = value
trigger(target, key)
returntrue
}
})
}每次你讀取或寫入響應式屬性時，Proxy 都會捕獲這個操作并告訴 Vue 的依賴追蹤器發生了什么。這就像有一個超級細心的助手，能注意到你與數據的每一次交互。
依賴追蹤的舞蹈
這里變得真正有趣起來。當組件首次渲染時，Vue 會追蹤渲染過程中使用的每一個 ref。之后，當 ref 發生變化時，它會觸發正在追蹤它的組件的重新渲染。
讓我們通過一個真實例子來分解這個過程：
<template>
<div>
<h1>{{ user.name }}</h1>
<p>{{ user.email }}</p>
<p>Total items: {{ itemCount }}</p>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const user = reactive({
name: 'Sarah',
email: 'sarah@example.com'
})
const itemCount = ref(5)
</script>當這個組件首次渲染時，幕后發生了以下事情：
- 讀取階段：Vue 注意到渲染函數讀取了
user.name、user.email和itemCount.value - 追蹤階段：Vue 創建依賴映射："這個組件依賴于這三個數據片段"
- 監聽階段：Vue 在這些屬性上設置隱形的觀察者
現在，當你執行 user.name = 'John' 這樣的操作時，Proxy 的 setter 會觸發，Vue 檢查其依賴映射，發現我們的組件關心 user.name，于是觸發重新渲染。只針對實際使用 user.name 的組件！
Ref vs Reactive：兩種魔法風味
Vue 提供了兩種創建響應式數據的主要方式，每種都有其獨特之處：
Refs：包裝器方式
import { ref } from 'vue'
const count = ref(0)
const user = ref({ name: 'Alex' })
// 訪問/修改需要使用 .value
console.log(count.value) // 0
count.value++
user.value.name = 'Jordan'在底層，Vue 在其 getter 中執行追蹤，在其 setter 中為 ref 執行觸發。ref 基本上是一個看起來像這樣的包裝器對象：
// 簡化的 ref 實現
const myRef = {
_value: 0,
getvalue() {
track() // 告訴 Vue "有人在讀取這個 ref"
returnthis._value
},
setvalue(newValue) {
this._value = newValue
trigger() // 告訴 Vue "這個 ref 改變了，更新依賴項！"
}
}Reactive：Proxy 方式
import { reactive } from 'vue'
const state = reactive({
count: 0,
user: { name: 'Alex' }
})
// 直接屬性訪問
console.log(state.count) // 0
state.count++
state.user.name = 'Jordan'Reactive 對象是 JavaScript Proxy，行為就像普通對象一樣。不同之處在于，Vue 能夠攔截響應式對象所有屬性的訪問和變更，以實現響應式追蹤和觸發。
深度響應式：一路深入
Vue 響應式最酷的事情之一是默認就是深度的。在 Vue 中，狀態默認是深度響應式的。這意味著即使你修改嵌套對象或數組，也能檢測到變化：
const state = reactive({
user: {
profile: {
settings: {
theme: 'dark'
}
}
},
items: ['apple', 'banana']
})
// 所有這些都會觸發響應式！
state.user.profile.settings.theme = 'light'
state.items.push('orange')
state.items[0] = 'grape'這是如何工作的？Vue 3 對響應式對象使用 Proxy，當你訪問嵌套對象時，Vue 會自動將其包裝在自己的 Proxy 中。這是一路向下的 Proxy！
性能甜蜜點
你可能會認為所有這些追蹤和監聽會很昂貴，但 Vue 在性能方面非常智能。通過使用 Proxy，Vue.js 可以最小化追蹤依賴的開銷。Proxy 本質上是惰性的，只在屬性被訪問或修改時應用處理程序。
此外，當你修改響應式狀態時，DOM 會自動更新。但需要注意的是，DOM 更新不是同步應用的。相反，Vue 會將它們緩沖到更新周期的"下一個 tick"，以確保每個組件只更新一次，無論你進行了多少次狀態更改。
這意味著你可以這樣做而不用擔心：
// 所有這些更改都會被批處理為單個更新！
state.count++
state.count++
state.count++
state.user.name = 'New Name'
state.items.push('new item')實際示例：構建購物車
讓我們通過一些實際的東西來看看響應式系統的運行：
<template>
<div>
<h2>Shopping Cart ({{ totalItems }} items)</h2>
<div v-for="item in cart.items" :key="item.id">
<span>{{ item.name }} - ${{ item.price }}</span>
<button @click="removeItem(item.id)">Remove</button>
</div>
<p><strong>Total: ${{ totalPrice }}</strong></p>
</div>
</template>
<script setup>
import { reactive, computed } from'vue'
const cart = reactive({
items: [
{ id: 1, name: 'Coffee', price: 4.99 },
{ id: 2, name: 'Donut', price: 2.49 }
]
})
// 這些計算屬性會在 cart.items 變化時自動更新
const totalItems = computed(() => cart.items.length)
const totalPrice = computed(() =>
cart.items.reduce((sum, item) => sum + item.price, 0).toFixed(2)
)
functionremoveItem(id) {
const index = cart.items.findIndex(item => item.id === id)
cart.items.splice(index, 1) // 這會觸發響應式！
}
</script>在這個例子中：
- 當
removeItem()修改cart.items時，Proxy 檢測到變化 - Vue 檢查哪些計算屬性依賴于
cart.items totalItems和totalPrice都會自動重新計算- 模板更新以顯示新值
所有這些都在瞬間發生，完全不需要手動干預！
調試超能力
想看看響應式系統的運行嗎？Vue 提供了 onRenderTracked 和 onRenderTriggered 生命周期鉤子用于調試：
import { onRenderTracked, onRenderTriggered } from 'vue'
onRenderTracked((event) => {
console.log('Tracked:', event.target, event.key)
})
onRenderTriggered((event) => {
console.log('Triggered:', event.target, event.key, event.newValue)
})這讓你可以確切地看到哪些屬性正在被追蹤，以及是什么導致你的組件重新渲染。對于調試性能問題非常有用！
常見陷阱（以及如何避免）
響應式系統很強大，但有一些需要注意的事項：
1. 不要解構響應式對象
const state = reactive({ count: 0, name: 'Vue' })
// ? 這會破壞響應式！
let { count } = state
count++ // 這不會觸發更新
// ? 改用這種方式
state.count++ // 這樣有效！當我們將響應式對象的原始類型屬性解構到局部變量中，或者將該屬性傳遞給函數時，我們將失去響應式連接。
2. 不要完全替換響應式對象
let state = reactive({ count: 0 })
// ? 這會破壞響應式連接！
state = reactive({ count: 1 })
// ? 改用這種方式
state.count = 13. 記住使用 .value 與 Refs
const count = ref(0)
// ? 在 JavaScript 中，你需要 .value
console.log(count) // 這是 ref 對象，不是值
// ? 正確的方式
console.log(count.value) // 這是實際的值
// 注意：在模板中，Vue 會自動解包 refs！
// {{ count }} 在模板中工作正常這對你的應用為什么重要
理解 Vue 的響應式系統不僅僅是學術知識——它能讓你成為更好的 Vue 開發者：
- 更好的性能：你會知道何時使用
ref與reactive，以及如何構建數據以實現最佳響應式 - 更輕松的調試：你會理解為什么你的組件會重新渲染，以及如何修復響應式問題
- 更清晰的代碼：你會編寫更可預測、更可維護的應用程序，充分利用 Vue 的能力
下次當你看到 Vue 應用在數據變化時神奇地更新 UI 時，你會確切知道發生了什么：Proxy、依賴追蹤和高效更新之間的復雜舞蹈，讓現代 Web 開發感覺像，嗯，魔法。
你在 Vue 中遇到過棘手的響應式問題嗎？你在使用 Vue 響應式系統時最喜歡的"頓悟時刻"是什么？在下面留言——我很想聽聽你的經驗！
原文地址：https://medium.com/@sohail_saifi/the-vue-js-reactivity-system-that-tracks-every-variable-change-2b89cc298393
作者：Sohail Saifi
