在上一篇文章中，我們大致瞭解瞭如何使用Vue3.0編寫一個簡單的計數器程序。不過，正如熟悉Vue2.x的朋友所看到的，我們用Vue3.0實現出來的代碼和Vue2.x的看起來並沒有什麼太大區別。難道Vue3.0就這樣了？沒什麼新的東西嗎？
非也。Vue3.0考慮到新老框架的平滑過渡，做了挺不錯的向下兼容，對Vue2.x風格的寫法幾乎都支持。這種Vue2.x的寫法被稱之為Options API（可選項式API），我們在創建組件的時候，其實都是在拼裝一個可選項集合，比如我們傳入data、computed、methods、watch以及created、mounted等生命週期函數，用這個可選項集合來聲明一個組件：
這種方式的代碼，組織良好，各個部分劃分的比較清晰。但它也有缺點，就是這樣的寫法在邏輯複用上面不太友好。我們知道JS裡最簡潔、最清晰的複用方式就是將邏輯封裝在一個個單純的函數里，然後函數與函數之間互相調用。像上面這種嵌套對象的形式，複用性和優雅度就打了折扣。另外，以函數形式組織成的模塊，在通過具名方式進行導入使用，在使用tree-shaking（搖樹優化，可減小打包尺寸）的時候支持的更好，有更好的效果。下面是具名方式導入模塊中的函數的例子，大家記得在編寫代碼的時候養成具名導入的好習慣：
再則，由於Vue3.0支持TypeScript，TypeScript很重要的一個特性就是可以進行類型推導，而函數天然對類型推導非常友好（至少比嵌套對象要好得多）。
因此，像Composition API這種函數式的編程風格，成為了新框架的亮點，也可能是各個前端框架未來的主角。下面，我們就嘗試使用Composition API來改造我們前文所寫的計數器程序，主要是對Counter組件進行初步改造，代碼大致就是這樣的：
我們觀察到，data、methods部分都不見了，取而代之的是一個setup方法，它是Vue3.0中新增的組件入口，專為使用Composition API而設計，調用時機是在組件生命週期的 beforeCreate 和 created 之間（所以在 setup 裡面是訪問不了你所期望的 this 對象的，即它裡面的this並不是指向當前組件，這點需要注意也儘量避免使用）。原先在 data 裡的響應式對象屬性 count 在這裡成為了一個使用 ref 函數創建的響應式常量；而用於遞增和重置這個 count 值的函數內部，不再需要通過 this 引用任何東西（也不推薦使用），這為我們進行進一步的重構提供了機會。我們可以把對 count 操作的業務邏輯獨立提取出來：
我們將 count 值操作邏輯都分離到了 useCount() 函數中，這種做法有利於拆分複雜的業務邏輯，讓代碼看起來更清晰，更好維護；在我們使用模塊化機制的時候，更可以進一步把這些獨立邏輯函數移入模塊文件中，讓每一部分的代碼都變得更乾淨。
好了，今天就先改到這兒，大家理解和消化一下代碼中出現的新東西吧，後續我會做更詳細的解讀分析。
閱讀更多 尚未禿頂的程序員 的文章
