vue2中,我們會在methods缸逃，computed针饥，watch，data中等等定義屬性和方法需频，共同處理頁面邏輯丁眼，我們稱這種方式為Options API。相信用過的都知道昭殉，方便是挺方便苞七，不過缺點也很明顯藐守，當(dāng)項目越來越大，很可能一個methods下就有二三十個方法蹂风， 還得確切地知道方法中可以訪問哪些屬性以及this關(guān)鍵字的行為卢厂，維護起來就十分麻煩了。Composition API（組合API）就是解決這個問題而生的惠啄。
一慎恒、好處
上面這張圖很明顯的說明了它的優(yōu)點，vue3 Composition API 中撵渡，我們的代碼是根據(jù)邏輯功能來組織的融柬，一個功能所定義的所有api會放在一起（更加的高內(nèi)聚，低耦合）趋距，這樣做粒氧，即使項目很大，功能很多棚品，我們都能快速的定位到這個功能所用到的所有API靠欢，而不像vue2 Options API 中一個功能所用到的API都是分散的。Vue核心團隊將組件Composition API描述為“一套附加的铜跑、基于函數(shù)的api门怪，允許靈活地組合組件邏輯”。下面我們來看個例子：
可以很明顯的看到锅纺，vue3中在setup再也不用考慮各種this指向了掷空，也不需要在data中去定義然后methods去使用了，自由度更高囤锉、更靈活了
看來上面的例子坦弟，你可能很感興趣上面setup這個函數(shù)了：
簡而言之，它只是一個函數(shù)官地，它將屬性和函數(shù)返回到模板酿傍。 我們在這里聲明所有的響應(yīng)式屬性、計算屬性驱入、觀察者和生命周期鉤子赤炒，然后返回它們，以便它們可以在模板中使用亏较。 我們沒有在setup函數(shù)返回的內(nèi)容將在模板中不可用莺褒，還有以下幾個特點 ：
1、由于在執(zhí)行 setup函數(shù)的時候雪情，還沒有執(zhí)行 Created 生命周期方法遵岩，所以在 setup 函數(shù)中，無法使用 data 和 methods 的變量和方法（首先創(chuàng)建組件實例巡通，然后初始化 props 尘执，緊接著就調(diào)用setup 函數(shù)舍哄。從生命周期的角度看，它會在 beforeCreate 鉤子之前被調(diào)用）
2正卧、由于我們不能在 setup函數(shù)中使用 data 和 methods蠢熄，所以 Vue 為了避免我們錯誤的使用跪解，直接將 setup函數(shù)中的this修改成了 undefined
3炉旷、setup函數(shù)只能是同步的不能是異步的
二谜慌、新的api
compositon-api提供了一下幾個函數(shù)
1.reactive
2.watchEffect
3.computed
4.ref
5.toRefs
官網(wǎng)介紹：可以用來為源響應(yīng)式對象上的 property 性創(chuàng)建一個
ref然后可以將 ref 傳遞出去套腹，從而保持對其源 property 的響應(yīng)式連接
通過上面這個例子不難看出，通過toRefs轉(zhuǎn)化過的對象端考，有了一個ref對象才有的
__v_isRef: true屬性图仓，toRefs將reactive定義的對象變成了一個響應(yīng)式對象罐盔，這也正是toRefs的作用。使用場景：使用父組件傳遞的props數(shù)據(jù)時救崔，要引用props的某個屬性且要保持響應(yīng)式（能這樣使用的原因是因為toRefs創(chuàng)建的對象是對象引用而不是原始數(shù)據(jù)的拷貝惶看，改變現(xiàn)有對象會同時改變原有對象）。
小知識：
看過vue3代碼的同學(xué)對于這種...toRefs(persen)的應(yīng)該不陌生六孵，這種寫法主要是用了ES6解構(gòu)賦值的思想纬黎，按照圖上來說，persen對象被解構(gòu)出來劫窒，變成了屬性name和age本今，界面中調(diào)用時只需使用{{name}}和{{age}}而不用使用persen.name訪問了，極其的方便主巍。
經(jīng)過以上了解冠息，在setup中定義變量時，為了使代碼可讀性更高孕索，推薦使用reactive+toRefs定義變量（reactive此時的作用就類似于vue2中的data了）
6.生命周期的hooks
