什么是ref與reactive

ref與reactive都是Vue3.0中新增的API，用于響應式數(shù)據(jù)的處理。

1. ref

ref是一個函數(shù)，可以用于將一個普通的數(shù)據(jù)類型轉(zhuǎn)換成響應式數(shù)據(jù)。ref返回一個包含value屬性的對象，通過修改value屬性的值，可以觸發(fā)組件更新。

使用方式如下：

import { ref } from 'vue'
const count = ref(0)
// 獲取值
console.log(count.value)
// 修改值
count.value++
// 在模板中使用
<template>
  <div>{{ count }}</div>
</template>

2. reactive

reactive是一個函數(shù)，用于將一個普通的對象轉(zhuǎn)換成響應式數(shù)據(jù)。reactive返回一個響應式的Proxy對象，通過修改該對象的屬性值，可以觸發(fā)組件更新。

使用方式如下：

import { reactive } from 'vue'
const state = reactive({
  count: 0,
  name: 'Tom'
})
// 獲取值
console.log(state.count)
// 修改值
state.count++
// 在模板中使用
<template>
  <div>{{ state.count }}</div>
</template>

區(qū)別:

• ref只能用于將基本類型數(shù)據(jù)轉(zhuǎn)換成響應式數(shù)據(jù)，而reactive可以將任意對象轉(zhuǎn)換成響應式數(shù)據(jù)。
• ref返回一個包含value屬性的對象，而reactive返回一個響應式的Proxy對象。
• 在使用上，ref更方便一些，使用起來更簡單直觀。而reactive比較靈活，可以將任意對象轉(zhuǎn)換成響應式數(shù)據(jù)，并且可以進行深層次的響應式處理。

reactive() API 有一些局限性：

有限的值類型：

它只能用于對象類型 (對象、數(shù)組和如 Map、Set 這樣的集合類型)。它不能持有如 string、number 或 boolean 這樣的原始類型。

不能替換整個對象：

由于 Vue 的響應式跟蹤是通過屬性訪問實現(xiàn)的，因此我們必須始終保持對響應式對象的相同引用。這意味著我們不能輕易地“替換”響應式對象，因為這樣的話與第一個引用的響應性連接將丟失：

let state = reactive({ count: 0 })
// 上面的 ({ count: 0 }) 引用將不再被追蹤
// (響應性連接已丟失！)
state = reactive({ count: 1 })

對解構操作不友好：

當我們將響應式對象的原始類型屬性解構為本地變量時，或者將該屬性傳遞給函數(shù)時，我們將丟失響應性連接：

const state = reactive({ count: 0 })
// 當解構時，count 已經(jīng)與 state.count 斷開連接
let { count } = state
// 不會影響原始的 state
count++
// 該函數(shù)接收到的是一個普通的數(shù)字
// 并且無法追蹤 state.count 的變化
// 我們必須傳入整個對象以保持響應性
callSomeFunction(state.count)

需要注意的是，使用ref和reactive時，不能直接修改屬性值的方式來更新數(shù)據(jù)，而是應該通過修改value或Proxy對象的屬性來觸發(fā)組件更新。例如：

// ref使用示例
const count = ref(0)
count++ // 這樣是錯誤的，應該使用count.value++
// reactive使用示例
const state = reactive({
  count: 0
})
state.count++ // 這樣是正確的，會觸發(fā)組件更新

到此這篇關于vue3.0中ref與reactive的區(qū)別及使用的文章就介紹到這了,更多相關vue3.0 ref與reactive使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論