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)

三、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