1. reactive：響應(yīng)式對(duì)象

1、概念

reactive 是用于創(chuàng)建響應(yīng)式對(duì)象的 API。它接收一個(gè)普通對(duì)象并返回一個(gè)代理對(duì)象。

這個(gè)代理對(duì)象是深度響應(yīng)的，也就是說，該對(duì)象及其所有嵌套對(duì)象都會(huì)成為響應(yīng)式的。并且可以感知到對(duì)它的所有操作（如屬性的讀寫、刪除等），并在數(shù)據(jù)變化時(shí)自動(dòng)觸發(fā)視圖更新。 

2、用法

import { reactive } from 'vue'
const reactiveObj = reactive({
  count: 1,
  flower: {
    name: 'rose'
  }
})
window.reactiveObj = reactiveObj;

可以在控制臺(tái)輸出 reactiveObj 查看，也可以修改它的數(shù)據(jù)。 

3、特性

1）深度響應(yīng)式：reactive 會(huì)遞歸地將對(duì)象及其所有嵌套對(duì)象轉(zhuǎn)化為響應(yīng)式對(duì)象。

2）Proxy 機(jī)制：reactive 基于 Proxy 實(shí)現(xiàn)，比 Vue 2 中的 Object.defineProperty 更加靈活和高效。

3）自動(dòng)依賴追蹤：當(dāng)響應(yīng)式對(duì)象的屬性在模板或計(jì)算屬性中被引用時(shí)，Vue 會(huì)自動(dòng)追蹤這些依賴，并在數(shù)據(jù)變化時(shí)更新相關(guān)的視圖。

4、注意

淺拷貝問題：reactive 創(chuàng)建的對(duì)象是一個(gè)代理對(duì)象，如果直接替換該對(duì)象（如 reactiveObj = {}），將無法保持響應(yīng)式效果。因此，建議修改對(duì)象的屬性，而不是替換整個(gè)對(duì)象來保持響應(yīng)式。

<template>
  <div>
    <p>reactiveObj.count: {{ reactiveObj.count }}</p>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue';
const reactiveObj = reactive({
  count: 1
})
window.reactiveObj = reactiveObj;
</script>

2. ref：響應(yīng)式引用

1、概念

ref 是另一種創(chuàng)建響應(yīng)式數(shù)據(jù)的方法，特別適用于基本類型的值（如字符串、數(shù)字、布爾值等），或需要獨(dú)立的響應(yīng)式引用。

ref 會(huì)返回一個(gè)包含 .value 屬性的對(duì)象，這個(gè)屬性持有實(shí)際值，并且是響應(yīng)式的。

2、用法

import { ref, reactive } from "vue";
// value 是普通類型數(shù)據(jù)時(shí)
const numberRef = ref(0);
window.numberRef = numberRef;
const stringRef = ref("hello");
window.stringRef = stringRef;
 
// value 是一個(gè)對(duì)象時(shí)
const objectRef = ref({ a: 1, b: 2 });
window.objectRef = objectRef;
 
// value 是一個(gè)代理對(duì)象
const reactiveObj = reactive({ a: 11, b: 22 });
const reactiveRef = ref(reactiveObj);
window.reactiveObj = reactiveObj;
window.reactiveRef = reactiveRef;

3、特性

1）單值響應(yīng)式：ref 非常適合處理基本數(shù)據(jù)類型的響應(yīng)式數(shù)據(jù)，或者是希望一個(gè)對(duì)象保持獨(dú)立響應(yīng)時(shí)。

2）模板自動(dòng)解包：在模板中使用 ref 時(shí)，Vue 會(huì)自動(dòng)解包 .value，不需要顯式使用 .value。

<template>
  <div>{{ numberRef }}</div> <!-- Vue 自動(dòng)解包為 numberRef.value -->
</template>

3）組合式 API 的靈活性：ref 在組合式 API 中非常靈活，適合管理組件內(nèi)部的狀態(tài)和獨(dú)立的響應(yīng)式變量。 

4、總結(jié)

1）傳入一個(gè)普通數(shù)據(jù)時(shí)，返回一個(gè)對(duì)象，對(duì)象屬性 value 是響應(yīng)式數(shù)據(jù)。

2）傳入一個(gè)對(duì)象時(shí)，會(huì)調(diào)用一下 reactive，將該對(duì)象變成一個(gè)代理 proxy，目的是為了讓對(duì)象里面的所有屬性全部變成響應(yīng)式數(shù)據(jù)。

3）傳入一個(gè)代理對(duì)象時(shí)，返回代理對(duì)象本身。

3. readonly：只讀響應(yīng)式對(duì)象

1、概念

readonly 是 Vue 3 提供的用于創(chuàng)建只讀響應(yīng)式對(duì)象的 API。它接收一個(gè)響應(yīng)式對(duì)象或普通對(duì)象，并返回一個(gè)只讀代理對(duì)象。

這個(gè)對(duì)象的所有屬性都變?yōu)橹蛔x，任何嘗試修改它的操作都會(huì)在開發(fā)環(huán)境下觸發(fā)警告。

2、用法

readonly 通常用于保護(hù)一些不應(yīng)被直接修改的數(shù)據(jù)，例如共享狀態(tài)或常量數(shù)據(jù)。

import { reactive, readonly } from "vue";
const reactiveObj = reactive({ a: 1, b: 2 });
const readonlyObj1 = readonly({ a: 11, b: 22 });
const readonlyObj2 = readonly(reactiveObj);
 
window.reactiveObj = reactiveObj;
window.readonlyObj1 = readonlyObj1;
window.readonlyObj2 = readonlyObj2;

4. computed：計(jì)算屬性 

1、概念 

computed 是 Vue 3 提供的用于創(chuàng)建計(jì)算屬性的 API。計(jì)算屬性基于響應(yīng)式數(shù)據(jù)或其他計(jì)算屬性，它們的值是通過一個(gè)函數(shù)計(jì)算出來的，并且只有當(dāng)其依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性才會(huì)重新計(jì)算。這使得計(jì)算屬性在性能和代碼簡(jiǎn)潔性上具有很大優(yōu)勢(shì)。

2、用法
computed 接收一個(gè)函數(shù)，這個(gè)函數(shù)返回的值會(huì)被 Vue 緩存，直到依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，才會(huì)重新計(jì)算。

import { computed, reactive } from "vue";
const reactiveObj = reactive({ a: 1, b: 2 });
const sumRef = computed(() => {
  console.log("computed函數(shù)執(zhí)行");
  return reactiveObj.a + reactiveObj.b;
});
console.log(sumRef);
console.log(sumRef.value);
console.log(sumRef.value);
console.log(sumRef.value);
reactiveObj.a = 3;
reactiveObj.b = 4;
console.log(sumRef.value);
console.log(sumRef.value);

3、特性

1）緩存機(jī)制：computed 的值是惰性計(jì)算的，并且會(huì)被緩存，直到依賴項(xiàng)變化。這與方法不同，方法在每次調(diào)用時(shí)都會(huì)執(zhí)行，而計(jì)算屬性只有在依賴變化時(shí)才會(huì)重新計(jì)算。

2）只讀默認(rèn)性：計(jì)算屬性默認(rèn)是只讀的，但也可以通過傳遞一個(gè)帶有 get 和 set 的對(duì)象，使其成為可寫的計(jì)算屬性。

import { ref, computed } from 'vue'
const count = ref(1);
const double = computed({
  get: () => count.value * 2,
  set: (value) => {
    count.value = value / 2
  }
})
double.value = 10;
console.log(count.value) // 5
count.value = 20;
console.log(double.value); // 40

4、注意

1）避免副作用：computed 應(yīng)該始終是純函數(shù)，不應(yīng)包含會(huì)產(chǎn)生副作用的代碼（例如，網(wǎng)絡(luò)請(qǐng)求、DOM 操作等），這部分邏輯應(yīng)放在 watch 或方法中處理。
2）適度使用：雖然計(jì)算屬性很強(qiáng)大，但在一些場(chǎng)景下，使用方法或 watch 可能會(huì)更加合適。

以上就是Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法的詳細(xì)內(nèi)容，更多關(guān)于Vue3獲取響應(yīng)式數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！