Vue3 ref、reactive、toRef、toRefs的區別

vue3.0里給數據添加響應式有很多api可用，有時傻傻分不清，哎，分享一下個人的理解。

一、reactive
reactive 用於為對象添加響應式狀態。接收一個js對象作為參數，返回一個具有響應式狀態的副本。

獲取數據值的時候直接獲取，不需要加.value
參數只能傳入對象類型
import { reactive } from 'vue'

// 響應式狀態
const state = reactive({
count: 0
})

// 打印count的值
console.log(state.count)

二、ref
ref 用於為數據添加響應式狀態。由於reactive只能傳入對象類型的參數，而對於基本數據類型要添加響應式狀態就只能用ref了，同樣返回一個具有響應式狀態的副本。

獲取數據值的時候需要加.value。可以理解為ref是通過reactive包裝了一層具有value屬性的對象實現的
參數可以傳遞任意數據類型，傳遞對象類型時也能保持深度響應式，所以適用性更廣。
vue 3.0 setup里定義數據時推薦優先使用ref，方便邏輯拆分和業務解耦。
import { ref } from 'vue'

// 為基本數據類型添加響應式狀態
const name = ref('Neo')

// 為復雜數據類型添加響應式狀態
const state = ref({
count: 0
})

// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

盡量不要混着用，reactive和ref選一種，toRef和toRefs選一種，不然代碼會很亂。

三、toRef
toRef 用於為源響應式對象上的屬性新建一個ref，從而保持對其源對象屬性的響應式連接。接收兩個參數：源響應式對象和屬性名，返回一個ref數據。例如使用父組件傳遞的props數據時，要引用props的某個屬性且要保持響應式連接時就很有用。

獲取數據值的時候需要加.value
toRef后的ref數據不是原始數據的拷貝，而是引用，改變結果數據的值也會同時改變原始數據

import { defineComponent, toRef } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 創建變量myTitle
    const myTitle = toRef(props, 'title')

    console.log(myTitle.value)
  }
})

四、toRefs
toRefs 用於將響應式對象轉換為結果對象，其中結果對象的每個屬性都是指向原始對象相應屬性的ref。常用於es6的解構賦值操作，因為在對一個響應式對象直接解構時解構后的數據將不再有響應式，而使用toRefs可以方便解決這一問題。

獲取數據值的時候需要加.value
toRefs后的ref數據不是原始數據的拷貝，而是引用，改變結果數據的值也會同時改變原始數據
作用其實和 toRef 類似，只不過 toRef 是一個個手動賦值，而 toRefs 是自動賦值。

import { defineComponent, toRefs } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 使用了解構賦值語法創建了變量myTitle
    const { myTitle } = toRefs(props)

    console.log(myTitle.value)
  }
})

盡量不要混着用，reactive和ref選一種，toRef和toRefs選一種，不然代碼會很亂。

————————————————
版權聲明：本文為CSDN博主「醉逍遙neo」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u010059669/article/details/112287552