一肿嘲、ref能定義任何類型的響應(yīng)式數(shù)據(jù)融击，
1、但是使用的時(shí)候需要通過(guò).value的形式去修改雳窟。
2、參數(shù)可以傳入任意數(shù)據(jù)類型。
3封救、vue 3.0 setup里定義數(shù)據(jù)時(shí)推薦優(yōu)先使用ref拇涤，方便邏輯拆分和業(yè)務(wù)解耦。
import { reactive } from 'vue'
// 響應(yīng)式狀態(tài)
const state = reactive({
count: 0
})
// 打印count的值
console.log(state.count)
二誉结、reactive定義的是對(duì)象類型的響應(yīng)式數(shù)據(jù)鹅士。
1、直接添加了響應(yīng)式可以直接使用惩坑，不用.value
2掉盅、參數(shù)只能傳入對(duì)象類型.
3、不能通過(guò) ...state 方式結(jié)構(gòu)以舒，這樣會(huì)丟失響應(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)式對(duì)象，不要通過(guò)解構(gòu)的方式return蔓钟，這是不具有響應(yīng)式的永票。可以通過(guò) toRefs 處理滥沫，然后再解構(gòu)返回侣集，這樣才具有響應(yīng)式
三、toRef
針對(duì)一個(gè)響應(yīng)式對(duì)象（reactive 封裝）的 prop（屬性）創(chuàng)建一個(gè)ref兰绣，且保持響應(yīng)式
兩者 保持引用關(guān)系
1世分、接收兩個(gè)參數(shù)：源響應(yīng)式對(duì)象和屬性名，返回一個(gè)ref數(shù)據(jù)缀辩。
例如使用父組件傳遞的props數(shù)據(jù)時(shí)罚攀，要引用props的某個(gè)屬性且要保持響應(yīng)式連接時(shí)就很有用。
2雌澄、獲取數(shù)據(jù)值的時(shí)候需要加.value
toRef后的ref數(shù)據(jù)如果是復(fù)雜類型數(shù)據(jù)時(shí)斋泄，不是原始數(shù)據(jù)的拷貝，而是引用镐牺，改變結(jié)果數(shù)據(jù)的值也會(huì)同時(shí)改變?cè)紨?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)式對(duì)象并將其所有屬性轉(zhuǎn)換為 ref 的實(shí)用方法
將響應(yīng)式對(duì)象（reactive封裝）轉(zhuǎn)成普通對(duì)象
對(duì)象的每個(gè)屬性(Prop)都是對(duì)應(yīng)的ref
兩者保持引用關(guān)系
用于將響應(yīng)式對(duì)象轉(zhuǎn)換為結(jié)果對(duì)象睬涧，其中結(jié)果對(duì)象的每個(gè)屬性都是指向原始對(duì)象相應(yīng)屬性的ref募胃。
1、常用于es6的解構(gòu)賦值操作畦浓，因?yàn)樵趯?duì)一個(gè)響應(yīng)式對(duì)象直接解構(gòu)時(shí)解構(gòu)后的數(shù)據(jù)將不再有響應(yīng)式痹束，而使用toRefs可以方便解決這一問(wèn)題。
2讶请、獲取數(shù)據(jù)值的時(shí)候需要加.value
toRefs后的ref數(shù)據(jù)如果是復(fù)雜類型數(shù)據(jù)時(shí)祷嘶，不是原始數(shù)據(jù)的拷貝，而是引用，改變結(jié)果數(shù)據(jù)的值也會(huì)同時(shí)改變?cè)紨?shù)據(jù)
作用其實(shí)和 toRef 類似论巍，只不過(guò) toRef 是對(duì)一個(gè)個(gè)屬性手動(dòng)賦值烛谊，而 toRefs 是自動(dòng)解構(gòu)賦值。
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 使用了解構(gòu)賦值語(yǔ)法創(chuàng)建了變量myTitle
const { myTitle } = toRefs(props)
console.log(myTitle.value)
}
})
