一、ref能定義任何類型的響應(yīng)式數(shù)據(jù)，
1、但是使用的時候需要通過.value的形式去修改。
2、參數(shù)可以傳入任意數(shù)據(jù)類型。
3、vue 3.0 setup里定義數(shù)據(jù)時推薦優(yōu)先使用ref，方便邏輯拆分和業(yè)務(wù)解耦。
import { reactive } from 'vue'
// 響應(yīng)式狀態(tài)
const state = reactive({
count: 0
})
// 打印count的值
console.log(state.count)
二、reactive定義的是對象類型的響應(yīng)式數(shù)據(jù)。
1、直接添加了響應(yīng)式可以直接使用，不用.value
2、參數(shù)只能傳入對象類型.
3、不能通過 ...state 方式結(jié)構(gòu)，這樣會丟失響應(yīng)式。
import { ref } from 'vue'
// 為基本數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
const name = ref('Neo')
// 為復(fù)雜數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
const state = ref({
count: 0
})
// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)
注意reactive封裝的響應(yīng)式對象，不要通過解構(gòu)的方式return，這是不具有響應(yīng)式的?？梢酝ㄟ^ toRefs 處理，然后再解構(gòu)返回，這樣才具有響應(yīng)式
三、toRef
針對一個響應(yīng)式對象（reactive 封裝）的 prop（屬性）創(chuàng)建一個ref，且保持響應(yīng)式
兩者 保持引用關(guān)系
1、接收兩個參數(shù)：源響應(yīng)式對象和屬性名，返回一個ref數(shù)據(jù)。
例如使用父組件傳遞的props數(shù)據(jù)時，要引用props的某個屬性且要保持響應(yīng)式連接時就很有用。
2、獲取數(shù)據(jù)值的時候需要加.value
toRef后的ref數(shù)據(jù)如果是復(fù)雜類型數(shù)據(jù)時，不是原始數(shù)據(jù)的拷貝，而是引用，改變結(jié)果數(shù)據(jù)的值也會同時改變原始數(shù)據(jù)。
import { defineComponent, toRef } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 創(chuàng)建變量myTitle
const myTitle = toRef(props, 'title')
console.log(myTitle.value)
}
})
四、toRefs
toRefs 是一種用于破壞響應(yīng)式對象并將其所有屬性轉(zhuǎn)換為 ref 的實用方法
將響應(yīng)式對象（reactive封裝）轉(zhuǎn)成普通對象
對象的每個屬性(Prop)都是對應(yīng)的ref
兩者保持引用關(guān)系
用于將響應(yīng)式對象轉(zhuǎn)換為結(jié)果對象，其中結(jié)果對象的每個屬性都是指向原始對象相應(yīng)屬性的ref。
1、常用于es6的解構(gòu)賦值操作，因為在對一個響應(yīng)式對象直接解構(gòu)時解構(gòu)后的數(shù)據(jù)將不再有響應(yīng)式，而使用toRefs可以方便解決這一問題。
2、獲取數(shù)據(jù)值的時候需要加.value
toRefs后的ref數(shù)據(jù)如果是復(fù)雜類型數(shù)據(jù)時，不是原始數(shù)據(jù)的拷貝，而是引用，改變結(jié)果數(shù)據(jù)的值也會同時改變原始數(shù)據(jù)
作用其實和 toRef 類似，只不過 toRef 是對一個個屬性手動賦值，而 toRefs 是自動解構(gòu)賦值。
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 使用了解構(gòu)賦值語法創(chuàng)建了變量myTitle
const { myTitle } = toRefs(props)
console.log(myTitle.value)
}
})
