一、composition API的基本使用

1、setup函數的基本使用

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

（1）、setup函數的參數

注意:props屬性依然需要寫，因為需要定義傳過來的值得類型等

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

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

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

在以前的data中定義的數據是響應式的，那是因為data中返回的數據vue內部都是用reactive函數進行了處理

2、reactive API

可以使數據變成響應式

注意：reactive()函數中必須傳入一個對象或者數組

3、ref API

ref 自動解包

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

4、readonly API

readonly的原理就是proxy的set方法會被劫持

上邊的三個案例都會報錯 因為readonly()包裹的數據是不允許修改的
注意：readonly接受一個對象 (響應式或純對象) 或 ref 并返回原始對象的只讀代理

二、其他的API

1、isProxy isReactive isReadonly toRaw shallowReactive shallowReadonly

2、toRefs

toRefs函數包裹的必須是一個reactive對象

3、toRef

注意：toref和toRefs都必須傳reactive對象 普通對象不可以
想要對reactive對象做解構的時候才會用到這兩個API

4、unref isRef shallowRef triggerRef

5、使用customRef實現對雙向綁定的數據進行節流

三、computed

注意：computed的返回值是一個ref對象

1、computed的基本使用

傳入一個函數：get函數

傳入一個對象：get和set

四、watchEffect

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

1、watchEffect的基本使用

watchEffect會自動收集需要偵聽的依賴

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

2、watchEffect的停止偵聽

3、watchEffect清除副作用

在onInvalidate函數中需要傳入一個函數，在傳入的這個函數中清除額外的副作用

4.在setup中使用ref

5、watchEffect的執行時機

五、watch

1、watch的基本使用

watch的三個參數，第一個是偵聽源，第二個是回調函數，第三個是配置

注意：watch的第一個參數可以是ref對象 可以是reactive對象 可以是函數 可以是數組

第一個參數傳get()函數：

第一個參數傳reactive對象

如果不想讓newvalue 和 oldvalue的值是reactive對象 而是普通的對象 那么應該這樣寫：

注意：如果第一個參數是reactive對象的話 默認是深度偵聽的

如果reactive包裹的是一個數組的話

第一個參數傳ref對象

2、watch偵聽多個數據源

偵聽多個數據源的做法就是第一個參數傳進去一個數組

這個案例的newvalue的值和oldvalue的值就成了數組形式

也可以這樣寫：

3、watch的選項

深度偵聽

注意：如果第一個參數是reactive對象的話 默認是深度偵聽的

如果不是reactive對象還想深度偵聽的話 需要這樣：

首次執行

imdedite:true的話oldvalue的是是undfind，因為這個時候沒有舊的值

六、生命周期鉤子

注意：生命周期可以注冊多個

七、provide和inject

provide()有兩個參數 第一個是傳過去的key,第二個是傳過去的值
inject()可以有兩個參數 第一個是傳過來的key,如果傳來的沒有值 第二個參數可以設置默認值

建議：傳過去的值一般都用readonly()包裹 這樣的話子孫組件就沒辦法修改這個值了

八、練習

1、計數器案例

2、修改title

3、本地緩存LocalStorage

九、jsx

總結

以上是生活随笔為你收集整理的composition API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。