Vue?中ref()和?reactive()響應式數(shù)據(jù)的使用方法

更新時間：2025年01月24日 11:30:42 作者：來一碗劉肉面

article介紹Vue3中ref()和reactive()函數(shù)的使用方法,ref()用于創(chuàng)建基本數(shù)據(jù)類型的響應式引用,reactive()用于創(chuàng)建響應式對象,本文介紹Vue中ref()和reactive()響應式數(shù)據(jù)的使用方法,感興趣的朋友一起看看吧

一、ref( )

在 Vue 3 中，ref() 是一個用于創(chuàng)建響應式引用的函數(shù)。它是 Vue 3 Composition API(組合式API) 的一部分，允許在組件中創(chuàng)建響應式數(shù)據(jù)。

使用對象：基本數(shù)據(jù)類型（String 、Number 、Boolean 、Null 等）、對象類型

****需要使用 . value

1.引入ref () 函數(shù)

// 引入
import { ref } from 'vue';

2. 創(chuàng)建響應式引用

// 定義 響應式數(shù)據(jù)  在 <script> 標簽中
// 在 <script> 標簽中寫的 JS 代碼 ， 都需要寫 .value 來獲取值
const name = ref('張三');
const age = ref(20);
const tel = '123xxxxxxxxxx';
const count = ref(0); // 創(chuàng)建一個響應式的數(shù)字
const message = ref('Hello, Vue 3!'); // 創(chuàng)建一個響應式的字符串

3. 訪問和修改引用的值

// 訪問和修改引用的值
// 使用 ref() 創(chuàng)建的響應式引用會返回一個對象
// 該對象有一個 .value 屬性來訪問和修改其值
console.log(count.value); // 0
count.value++; // 修改值
console.log(count.value); // 1

4. 在模板中的使用

<template>
// 在模板中，不需要使用 .value 。當在模板中使用時，ref 會自動解包
    <div class="person">
        <h2>姓名：{
  { name }}</h2>
        <h2>年齡：{
  { age }}</h2>
        <h2>地址：{
  { tel }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年齡</button>
        <button @click="showTel">查看電話</button>
        <p>{
  { count }}</p> <!-- 直接使用 count -->
        <button @click="count++">Increment</button>
    </div>
</template>

5. 與對象的結合使用

const user = ref({
  name: 'Alice',
  age: 25,
});
// 訪問和修改對象屬性
console.log(user.value.name); // Alice
user.value.age++; // 修改屬性
console.log(user.value.age); // 26

當我們在模板中使用了 ref 時，在改變了這個 ref 的值時，Vue 會自動檢測到這個變化，并且相應地更新 DOM。

ref ( ) 是基于 reactive( ) 編寫的。

二、reactive( )

在 Vue 3 中，reactive() 是一個用于創(chuàng)建響應式對象的函數(shù)。它是 Vue 3 組合式 API 的一部分，允許開發(fā)者將普通對象轉換為響應式對象，從而在數(shù)據(jù)變化時自動更新視圖。

使用對象：對象類型

****不需要使用 . value

1.導入 reactive ( ) 函數(shù)

// 從 Vue 中導入
import { reactive } from 'vue';

2.創(chuàng)建響應式對象

// 創(chuàng)建響應式對象
const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!',
});

3. 訪問和修改響應式屬性

// 訪問和修改響應式屬性
// 可以像訪問普通對象一樣訪問和修改響應式對象的屬性。
// Vue 會自動追蹤這些屬性的變化，并在它們變化時更新視圖。
console.log(state.count); // 0
state.count++; // 修改屬性
console.log(state.count); // 1

4. 支持嵌套對象的響應性：

const state = reactive({
    user: {
        name: 'Alice',
        age: 25,
    },
});
// 訪問嵌套屬性
console.log(state.user.name); // Alice
// 修改嵌套屬性
state.user.age++;
console.log(state.user.age); // 26

三、ref( ) 與 reactive( ) 的區(qū)別：

ref() 返回一個包含 .value 屬性的對象，而 reactive() 返回的是一個直接可用的響應式對象。
reactive 重新分配一個新對象，會失去響應式。（可以使用Object.assign 來整體替換）。
使用原則：
- 若需要一個基本類型的響應式數(shù)據(jù)，必須使用 ref ;
- 若需要一個響應式對象，層級不深，ref ，reactive 都可以使用；
- 若需要一個響應式對象，且層級較深，推薦使用 reactive。