快捷導(dǎo)航

Vue3中ref和reactive的區(qū)別及說明

更新時(shí)間：2024年11月06日 09:06:59 作者：合格的程序員

在Vue3中,ref主要用于基本數(shù)據(jù)類型和單個(gè)數(shù)據(jù)管理,需要用.value訪問,reactive適用于對(duì)象和多數(shù)據(jù)管理,直接訪問屬性,ref支持解構(gòu)保持響應(yīng)性,reactive解構(gòu)后失去響應(yīng)性,選擇合適的方法可以使代碼更優(yōu)化

Vue3 ref和reactive的區(qū)別

在 Vue 3 中，ref 和 reactive 都是用來創(chuàng)建響應(yīng)式數(shù)據(jù)的方法

但它們有以下主要區(qū)別：

1. 使用場(chǎng)景不同

ref：

主要用于基本數(shù)據(jù)類型（String、Number、Boolean 等）
也可以用于對(duì)象/數(shù)組，但需要通過 .value 訪問
適合單個(gè)響應(yīng)式數(shù)據(jù)的管理

import { ref } from 'vue'

// 基本類型
const count = ref(0)
console.log(count.value) // 0

// 對(duì)象類型
const user = ref({
  name: 'Tom',
  age: 18
})
console.log(user.value.name) // 'Tom'

reactive：

主要用于對(duì)象類型（Object、Array）
直接訪問屬性，不需要 .value
適合多個(gè)響應(yīng)式數(shù)據(jù)的管理

import { reactive } from 'vue'

const state = reactive({
  name: 'Tom',
  age: 18,
  hobbies: ['reading', 'swimming']
})
console.log(state.name) // 'Tom'

2. 訪問方式不同

ref：

在 setup 中需要通過 .value 訪問
在模板中自動(dòng)解包，直接使用

<script setup>
import { ref } from 'vue'

const count = ref(0)
// setup 中需要 .value
const increment = () => {
  count.value++
}
</script>

<template>
  <!-- 模板中直接使用，不需要 .value -->
  <div>{{ count }}</div>
</template>

reactive：

直接訪問屬性，不需要 .value
在模板和 setup 中的訪問方式相同

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0
})
// 直接訪問
const increment = () => {
  state.count++
}
</script>

<template>
  <!-- 直接訪問 -->
  <div>{{ state.count }}</div>
</template>

3. 解構(gòu)行為不同

ref：

支持解構(gòu)，解構(gòu)后仍然保持響應(yīng)性
可以使用 toRefs 將 reactive 對(duì)象的屬性轉(zhuǎn)換為 ref

import { ref, toRefs } from 'vue'

const user = reactive({
  name: ref('Tom'),
  age: ref(18)
})

// ref 解構(gòu)后保持響應(yīng)性
const { name, age } = toRefs(user)
name.value = 'Jerry' // 仍然是響應(yīng)式的

reactive：

解構(gòu)后會(huì)失去響應(yīng)性
需要使用 toRefs 保持響應(yīng)性

import { reactive } from 'vue'

const state = reactive({
  name: 'Tom',
  age: 18
})

// 直接解構(gòu)會(huì)失去響應(yīng)性
const { name, age } = state
name = 'Jerry' // 不再是響應(yīng)式的

// 使用 toRefs 保持響應(yīng)性
const { name, age } = toRefs(state)
name.value = 'Jerry' // 仍然是響應(yīng)式的

4. 使用建議

使用 ref 的場(chǎng)景：
- 基本數(shù)據(jù)類型的響應(yīng)式
- 需要解構(gòu)的響應(yīng)式數(shù)據(jù)
- 單個(gè)響應(yīng)式數(shù)據(jù)的管理

const count = ref(0)
const message = ref('hello')
const isVisible = ref(true)

使用 reactive 的場(chǎng)景：
- 復(fù)雜對(duì)象的響應(yīng)式
- 多個(gè)相關(guān)數(shù)據(jù)的組合
- 不需要解構(gòu)的數(shù)據(jù)管理

const state = reactive({
  user: {
    name: 'Tom',
    age: 18
  },
  settings: {
    theme: 'dark',
    notifications: true
  }
})

混合使用：
- 可以在 reactive 對(duì)象中使用 ref
- 使用 toRefs 轉(zhuǎn)換 reactive 對(duì)象為 ref

const state = reactive({
  count: ref(0),
  user: {
    name: ref('Tom'),
    age: ref(18)
  }
})

// 轉(zhuǎn)換為 ref
const { count, user } = toRefs(state)

通過理解這些區(qū)別，你可以根據(jù)具體場(chǎng)景選擇合適的響應(yīng)式方案，使代碼更加清晰和易于維護(hù)。