一、Vue3 數(shù)據(jù)響應(yīng)式原理

（一）Proxy 替代 Object.defineProperty

在 Vue2 中，數(shù)據(jù)響應(yīng)式是通過 Object.defineProperty 實(shí)現(xiàn)的。這種方法雖然能夠監(jiān)聽對(duì)象屬性的變化，但也存在一些局限性：

• 無法監(jiān)聽新增或刪除的屬性：如果動(dòng)態(tài)地向?qū)ο筇砑有聦傩?，Vue2 是無法檢測(cè)到的。
• 數(shù)組操作的支持有限：對(duì)于數(shù)組的操作（如 push、pop 等），需要額外處理。
• 性能問題：當(dāng)對(duì)象層級(jí)較深時(shí)，遞歸遍歷所有屬性會(huì)帶來較大的性能開銷。

為了解決這些問題，Vue3 引入了 Proxy 對(duì)象來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式。Proxy 提供了更強(qiáng)大的功能，可以攔截對(duì)目標(biāo)對(duì)象的各種操作，包括屬性讀取、賦值、刪除、數(shù)組索引訪問等。

Proxy 的優(yōu)勢(shì)：

• 全面性：可以監(jiān)聽對(duì)象的新增屬性和刪除屬性。
• 高效性：無需遞歸遍歷整個(gè)對(duì)象樹，只有在訪問某個(gè)屬性時(shí)才會(huì)觸發(fā)代理。
• 支持?jǐn)?shù)組操作：可以直接監(jiān)聽數(shù)組的變化，例如 push、splice 等方法。

以下是一個(gè)簡(jiǎn)單的 Proxy 示例，展示了如何監(jiān)聽對(duì)象的變化：

const target = {
  name: 'Vue3',
  features: ['Composition API', 'Teleport', 'Fragments']
};
 
const handler = {
  get(target, key, receiver) {
    console.log(`獲取屬性: ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`設(shè)置屬性: ${key} -> ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
};
 
const proxy = new Proxy(target, handler);
 
proxy.name; // 輸出: 獲取屬性: name
proxy.features.push('Custom Renderer'); // 輸出: 獲取屬性: features

通過 Proxy，我們可以輕松地實(shí)現(xiàn)對(duì)對(duì)象的深度監(jiān)聽，從而為 Vue3 的響應(yīng)式系統(tǒng)奠定了堅(jiān)實(shí)的基礎(chǔ)。

（二）依賴收集與更新機(jī)制

Vue3 的響應(yīng)式系統(tǒng)不僅能夠監(jiān)聽數(shù)據(jù)的變化，還能智能地收集依賴并觸發(fā)更新。以下是其工作流程的簡(jiǎn)要說明：

• 依賴收集：當(dāng)組件渲染時(shí)，Vue3 會(huì)自動(dòng)追蹤模板中使用的響應(yīng)式數(shù)據(jù)，并將其與對(duì)應(yīng)的渲染函數(shù)建立關(guān)聯(lián)。
• 觸發(fā)更新：當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，Vue3 會(huì)通知所有相關(guān)的依賴（如計(jì)算屬性、渲染函數(shù)等），并重新執(zhí)行這些依賴以更新視圖。

為了更好地理解這一過程，我們可以通過以下圖示來展示依賴收集與更新的機(jī)制：

二、數(shù)據(jù)操作方法與實(shí)戰(zhàn)技巧

（一）ref 與 reactive

1. ref：處理基本類型

• 通過 .value 訪問和修改數(shù)據(jù)。
• 適用場(chǎng)景：基本類型（數(shù)字、字符串）、需要保持引用穩(wěn)定的對(duì)象。

import { ref } from 'vue';
 
const count = ref(0); // 創(chuàng)建一個(gè)初始值為 0 的響應(yīng)式數(shù)據(jù)
console.log(count.value); // 輸出: 0
count.value++; // 修改值
console.log(count.value); // 輸出: 1

2. reactive：處理復(fù)雜對(duì)象

reactive則用于創(chuàng)建復(fù)雜對(duì)象（如普通對(duì)象、數(shù)組等）的響應(yīng)式數(shù)據(jù)。與 ref 不同，reactive返回的是一個(gè)直接可操作的代理對(duì)象。

注意：解構(gòu)會(huì)丟失響應(yīng)性，需使用 toRefs 轉(zhuǎn)換。

import { reactive } from 'vue';
 
const state = reactive({
  name: 'Vue3',
  features: ['Composition API', 'Teleport']
});
 
state.features.push('Fragments'); // 直接修改數(shù)組
console.log(state.features); // 輸出: ['Composition API', 'Teleport', 'Fragments']

對(duì)比圖：

（二）計(jì)算屬性（Computed）

• 緩存機(jī)制：只有當(dāng)依賴項(xiàng)變化時(shí)，才會(huì)重新計(jì)算。
• 鏈?zhǔn)揭蕾?/strong>：計(jì)算屬性可以依賴其他計(jì)算屬性。

import { reactive, computed } from 'vue';
 
const state = reactive({
  count: 0
});
 
const doubleCount = computed(() => state.count * 2);
 
console.log(doubleCount.value); // 輸出: 0
state.count++;
console.log(doubleCount.value); // 輸出: 2

import { ref, watch } from 'vue';
 
const count = ref(0);
 
watch(count, (newValue, oldValue) => {
  console.log(`count 從 ${oldValue} 變?yōu)?${newValue}`);
});
 
count.value++; // 輸出: count 從 0 變?yōu)?1

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <input v-model="state.name" placeholder="Enter name" />
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, watch } from 'vue';
 
const count = ref(0);
const state = reactive({ name: 'Vue3' });
 
// 計(jì)算屬性
const doubleCount = computed(() => count.value * 2);
 
// 監(jiān)聽多個(gè)數(shù)據(jù)源
watch([count, () => state.name], ([newCount, newName]) => {
  console.log(`Count: ${newCount}, Name: ${newName}`);
});
 
function increment() {
  count.value++;
}
</script>