1. reactive：響應式對象

1、概念

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

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

2、用法

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

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

3、特性

1）深度響應式：reactive 會遞歸地將對象及其所有嵌套對象轉化為響應式對象。

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

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

4、注意

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

<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：響應式引用

1、概念

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

ref 會返回一個包含 .value 屬性的對象，這個屬性持有實際值，并且是響應式的。

2、用法

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

3、特性

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

2）模板自動解包：在模板中使用 ref 時，Vue 會自動解包 .value，不需要顯式使用 .value。

<template>
  <div>{{ numberRef }}</div> <!-- Vue 自動解包為 numberRef.value -->
</template>

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

4、總結

1）傳入一個普通數(shù)據(jù)時，返回一個對象，對象屬性 value 是響應式數(shù)據(jù)。

2）傳入一個對象時，會調用一下 reactive，將該對象變成一個代理 proxy，目的是為了讓對象里面的所有屬性全部變成響應式數(shù)據(jù)。

3）傳入一個代理對象時，返回代理對象本身。

3. readonly：只讀響應式對象

1、概念

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

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

2、用法

readonly 通常用于保護一些不應被直接修改的數(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：計算屬性 

1、概念 

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

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

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）緩存機制：computed 的值是惰性計算的，并且會被緩存，直到依賴項變化。這與方法不同，方法在每次調用時都會執(zhí)行，而計算屬性只有在依賴變化時才會重新計算。

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

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 應該始終是純函數(shù)，不應包含會產生副作用的代碼（例如，網絡請求、DOM 操作等），這部分邏輯應放在 watch 或方法中處理。
2）適度使用：雖然計算屬性很強大，但在一些場景下，使用方法或 watch 可能會更加合適。

以上就是Vue3獲取響應式數(shù)據(jù)的四種方法的詳細內容，更多關于Vue3獲取響應式數(shù)據(jù)的資料請關注腳本之家其它相關文章！

最新評論