回顧一下：

在vue2中如何組織代碼的，我們會在一個vue文件中methods，computed，watch，data中等等定義屬性和方法，共同處理頁面邏輯，（特定的區(qū)域寫特定的代碼，隨著業(yè)務復雜度提高，會導致后續(xù)維護復雜、復用性不高）

我們稱這種方式為Options API

在這里插入圖片描述

缺點： 一個功能往往需要在不同的vue配置項中定義屬性和方法，比較分散，項目小還好，清晰明了，但是項目大了后，一個methods中可能包含20多個方法，你往往分不清哪個方法對應著哪個功能

vue3中的Composition API就是用來解決這個問題的

在vue3 Composition API 中，我們的代碼是根據邏輯功能來組織的，一個功能所定義的所有api會放在一起（更加的高內聚，低耦合），這樣做，即時項目很大，功能很多，我們都能快速的定位到這個功能所用到的所有API，而不像vue2 Options API 中一個功能所用到的API都是分散的，需要改動功能，到處找API的過程是很費勁的

一個功能所定義的所有api會放在一起:

在這里插入圖片描述

在這里插入圖片描述

為什么要使用 Composition API：

• Composition API 是根據邏輯相關性組織代碼的，提高可讀性和可維護性
• 基于函數組合的 API 更好的重用邏輯代碼（在vue2 Options API中通過Mixins重用邏輯代碼，容易發(fā)生命名沖突且關系不清）