當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

composition API

發(fā)布時(shí)間：2024/8/1 编程问答 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 composition API 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、composition API的基本使用

1、setup函數(shù)的基本使用

注意：setup()函數(shù)中不能使用this
注意：setup()比created()執(zhí)行的早

（1）、setup函數(shù)的參數(shù)

注意:props屬性依然需要寫，因?yàn)樾枰x傳過來的值得類型等

（2）、setup()函數(shù)的返回值

注意：如果setup()和data中都定義了counter,那么使用的是setup()中的counter

（3）、 setup中定義方法（methods）

在以前的data中定義的數(shù)據(jù)是響應(yīng)式的，那是因?yàn)閐ata中返回的數(shù)據(jù)vue內(nèi)部都是用reactive函數(shù)進(jìn)行了處理

2、reactive API

可以使數(shù)據(jù)變成響應(yīng)式

注意：reactive()函數(shù)中必須傳入一個(gè)對(duì)象或者數(shù)組

3、ref API

ref 自動(dòng)解包

注意：ref的返回值是一個(gè)對(duì)象數(shù)據(jù)在value屬性中。
ref()也可以傳入對(duì)象

4、readonly API

readonly的原理就是proxy的set方法會(huì)被劫持

上邊的三個(gè)案例都會(huì)報(bào)錯(cuò) 因?yàn)閞eadonly()包裹的數(shù)據(jù)是不允許修改的
注意：readonly接受一個(gè)對(duì)象 (響應(yīng)式或純對(duì)象) 或 ref 并返回原始對(duì)象的只讀代理

二、其他的API

1、isProxy isReactive isReadonly toRaw shallowReactive shallowReadonly

2、toRefs

toRefs函數(shù)包裹的必須是一個(gè)reactive對(duì)象

3、toRef

注意：toref和toRefs都必須傳reactive對(duì)象普通對(duì)象不可以
想要對(duì)reactive對(duì)象做解構(gòu)的時(shí)候才會(huì)用到這兩個(gè)API

4、unref isRef shallowRef triggerRef

5、使用customRef實(shí)現(xiàn)對(duì)雙向綁定的數(shù)據(jù)進(jìn)行節(jié)流

三、computed

注意：computed的返回值是一個(gè)ref對(duì)象

1、computed的基本使用

傳入一個(gè)函數(shù)：get函數(shù)

傳入一個(gè)對(duì)象：get和set

四、watchEffect

注意：watchEffect拿不到原來的值但是watch可以

1、watchEffect的基本使用

watchEffect會(huì)自動(dòng)收集需要偵聽的依賴

注意：watchEffect一開始就會(huì)執(zhí)行一次，
如果watchEffect()里邊傳入的函數(shù)中沒有使用age,那么就不會(huì)收集age的依賴意思就是age單獨(dú)發(fā)生改變時(shí)并不會(huì)觸發(fā)這個(gè)事件

2、watchEffect的停止偵聽

3、watchEffect清除副作用

在onInvalidate函數(shù)中需要傳入一個(gè)函數(shù)，在傳入的這個(gè)函數(shù)中清除額外的副作用

4.在setup中使用ref

5、watchEffect的執(zhí)行時(shí)機(jī)

五、watch

1、watch的基本使用

watch的三個(gè)參數(shù)，第一個(gè)是偵聽源，第二個(gè)是回調(diào)函數(shù)，第三個(gè)是配置

注意：watch的第一個(gè)參數(shù)可以是ref對(duì)象可以是reactive對(duì)象可以是函數(shù) 可以是數(shù)組

第一個(gè)參數(shù)傳get()函數(shù)：

第一個(gè)參數(shù)傳reactive對(duì)象

如果不想讓newvalue 和 oldvalue的值是reactive對(duì)象而是普通的對(duì)象那么應(yīng)該這樣寫：

注意：如果第一個(gè)參數(shù)是reactive對(duì)象的話默認(rèn)是深度偵聽的

如果reactive包裹的是一個(gè)數(shù)組的話

第一個(gè)參數(shù)傳ref對(duì)象

2、watch偵聽多個(gè)數(shù)據(jù)源

偵聽多個(gè)數(shù)據(jù)源的做法就是第一個(gè)參數(shù)傳進(jìn)去一個(gè)數(shù)組

這個(gè)案例的newvalue的值和oldvalue的值就成了數(shù)組形式

也可以這樣寫：

3、watch的選項(xiàng)

深度偵聽