1. reactive api

為什么要使用reactive api，因為想要復(fù)刻options api的做法，在setup函數(shù)中是行不通的，data函數(shù)中定義的變量之所以是響應(yīng)式的，是因為經(jīng)過了reactive函數(shù)的處理。

可以看到這樣的寫法變量counter不是響應(yīng)式的。

使用reactive api修改之后：將counter放在對象中，由reactive函數(shù)處理，使用處理過的返回值中的couter

可以看到，此時state對象中的counter已經(jīng)是響應(yīng)式的了。

reactive api傳入類型必須是對象或者數(shù)組，這樣在使用時，需要用state.counter的形式來取用counter，感覺有點麻煩，這時Vue3提供了另一個api：ref api。

2.ref api

使用ref api需要注意的地方：

1.ref傳入類型：所有類型，比reactive api不受限制；

2.ref返回一個響應(yīng)式的對象，value屬性維護(hù)其值；

3.模板(template)中會自動解包，不需要以.value的形式獲取值，但setup函數(shù)中不會自動解包。

如果我將counter放在一個對象中，再使用ref，那么模板是否會自動解包：不會

4. 原因：ref的解包是一個淺層的解包

此時需要.value來獲取這個ref對象的值

但是reactive api 包裹的對象，可以深層解包

1. isProxy: 檢查對象是否由reactive或readonly創(chuàng)建的proxy；

2. isReactive: 檢查對象是否是由 reactive創(chuàng)建的響應(yīng)式代理，但是如果該代理是 readonly 建的，但包裹了由 reactive 創(chuàng)建的另一個代理，它也會返回 true；

3.? isReadonly:?檢查對象是否是由 readonly 創(chuàng)建的只讀代理；

4.? toRaw: 返回 reactive 或 readonly 代理的原始對象(不建議保留對原始對象的持久引用)

5. shallowReactive: 創(chuàng)建一個響應(yīng)式代理，它跟蹤其自身 property 的響應(yīng)性，但不執(zhí)行嵌套對象的深層響應(yīng)式轉(zhuǎn)換(深層還是原生對象)；

6. shallowReadonly: 創(chuàng)建一個 proxy，使其自身的 property 為只讀，但不執(zhí)行套對象的深度只讀轉(zhuǎn)換(深層還是可讀、可寫的)；

假如想對響應(yīng)式對象解構(gòu)賦值，盡管是reactive處理過的對象，解構(gòu)出來的值不會是響應(yīng)式的

想讓其成為響應(yīng)式的，可以使用toRefs api

1.toRefs api: 將reoctive對象中的所有屬性都轉(zhuǎn)成ref，建立連接

而且，toRefs api相當(dāng)于在info中的每一個屬性的value與解構(gòu)之后的值做了連接，一個更改之后另一個也會隨之更改

如果只想對其中一個屬性轉(zhuǎn)換為ref，那么可以使用toRef api

2.toRef: 對其中一個屬性進(jìn)行轉(zhuǎn)換ref，建立連接

格式：toRef(object,key）