Vue 3 中 ref 與 reactive 的對比

在 Vue 3 中，ref 和 reactive 都是用于創(chuàng)建響應式數(shù)據(jù)的方法，但它們在使用方式、應用場景等方面存在一些差異，以下是詳細對比：

一、定義和基本使用

ref

• 定義：ref 用于創(chuàng)建一個響應式的引用對象，它可以包裹任何類型的值，包括基本數(shù)據(jù)類型（如數(shù)字、字符串、布爾值等）和對象。
• 基本使用：通過 ref 函數(shù)創(chuàng)建一個響應式引用，使用時需要通過 .value 來訪問和修改其值。

import { ref } from 'vue'; 
const count = ref(0); 
// 訪問值 
console.log(count.value); 
// 修改值 
count.value = 1; 

reactive

• 定義：reactive 用于創(chuàng)建一個響應式對象，它只能接受一個普通對象作為參數(shù)，并返回該對象的響應式代理。
• 基本使用：直接使用 reactive 函數(shù)將一個普通對象轉換為響應式對象，訪問和修改其屬性時無需額外的 .value。

import { reactive } from 'vue'; 
const state = reactive({ 
  name: 'John', 
  age: 30 
}); 
// 訪問屬性 
console.log(state.name); 
// 修改屬性 
state.age = 31; 

二、響應式原理

ref

ref 是基于 Object.defineProperty() 或 Proxy（取決于運行環(huán)境）實現(xiàn)的。它將傳入的值包裝在一個對象中，并通過 getter 和 setter 來實現(xiàn)響應式。當值發(fā)生變化時，Vue 會自動更新與之綁定的 DOM。

reactive

reactive 是基于 Proxy 實現(xiàn)的。它會創(chuàng)建一個對象的代理，攔截對象的屬性訪問和修改操作，從而實現(xiàn)響應式。這意味著 reactive 可以對對象的深層屬性進行響應式追蹤。

三、適用場景

ref

• 基本數(shù)據(jù)類型：當需要創(chuàng)建響應式的基本數(shù)據(jù)類型時，ref 是首選。因為基本數(shù)據(jù)類型不是對象，無法直接使用 reactive。
• 模板中使用：在模板中使用 ref 時，Vue 會自動解包 .value，可以直接使用 {{ count }} 來顯示值。
• 與外部庫集成：在與一些需要原始值的外部庫集成時，ref 可以方便地提供原始值。

reactive

• 復雜對象：當需要創(chuàng)建響應式的復雜對象時，reactive 更為合適。它可以直接處理對象的屬性，無需額外的 .value 操作。
• 對象嵌套：對于嵌套對象，reactive 可以自動處理深層屬性的響應式，無需手動為每個嵌套對象創(chuàng)建 ref。

四、注意事項

ref

解構賦值：對 ref 進行解構賦值會失去響應式。如果需要解構 ref 并保持響應式，可以使用 toRefs 函數(shù)。

import { ref, toRefs } from 'vue'; 
const state = ref({ 
  name: 'John', 
  age: 30 
}); 
// 解構后失去響應式 
const { name, age } = state.value; 
// 使用 toRefs 保持響應式 
const { name, age } = toRefs(state.value); 

reactive

對象替換：不能直接將 reactive 對象替換為另一個對象，否則會失去響應式。如果需要替換對象，可以使用 reactive 重新創(chuàng)建一個響應式對象。

import { reactive } from 'vue'; 
const state = reactive({
  name: 'John', 
  age: 30 
}); 
// 錯誤：失去響應式 
state = reactive({ 
  name: 'Jane', 
  age: 25 
}); 

綜上所述，ref 和 reactive 在 Vue 3 中都有各自的優(yōu)勢和適用場景，開發(fā)者可以根據(jù)具體需求選擇合適的方法來創(chuàng)建響應式數(shù)據(jù)。

到此這篇關于Vue 3 中 ref 與 reactive 的對比的文章就介紹到這了,更多相關Vue 3 ref 與 reactive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論