Vue.js 3.x 中的響應式數(shù)據(jù)ref 與 reactive詳解

更新時間：2024年01月02日 10:48:03 作者：此行月相隨

ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應式數(shù)據(jù)的兩個關鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下

1. ref：處理基本數(shù)據(jù)類型的響應式數(shù)據(jù)

ref 主要用于創(chuàng)建包裝基本數(shù)據(jù)類型的響應式數(shù)據(jù)。通過 ref，我們可以將數(shù)字、字符串、布爾等基本數(shù)據(jù)類型包裝在一個對象中，以便進行響應式處理。

import { ref } from 'vue';
// 使用 ref 創(chuàng)建響應式數(shù)據(jù)
const count = ref(0);
// 訪問 ref 的值
console.log(count.value); // 輸出: 0
// 修改 ref 的值
count.value++;

在上述例子中，我們使用 ref 創(chuàng)建了一個包裝了數(shù)字的響應式對象 count。注意，要訪問和修改 ref 的值，需要使用 .value。

2. reactive：處理對象類型的響應式數(shù)據(jù)

相比之下，reactive 更適用于處理對象類型的響應式數(shù)據(jù)。通過 reactive，我們可以將整個對象變成響應式，包括對象的所有屬性。(類似于vue2的data函數(shù)）

import { reactive } from 'vue';
// 使用 reactive 創(chuàng)建響應式對象
const state = reactive({
  message: 'Hello Vue',
  nested: {
    value: 42
  }
});
// 直接訪問 reactive 對象的屬性
console.log(state.message); // 輸出: Hello Vue
// 修改 reactive 對象的屬性
state.message = 'Vue 3 is awesome';
// 訪問嵌套屬性
console.log(state.nested.value); // 輸出: 42

在上述例子中，我們使用 reactive 創(chuàng)建了一個響應式對象 state，其中包含了一個字符串屬性 message 和一個嵌套對象屬性 nested。