簡介

????????Vue 3支持選項式API和組合式API。其中，選項式API是從Vue 2開始使用的一種寫法，而Vue 3新增了組合式API的寫法。

選項式API

????????選項式API是一種通過包含多個選項的對象來描述組件邏輯的API，其常用的選項包括data、methods、computed、watch等。

? ? ? ? 格式：

<script>export default {data() {return { // 定義數據 }},methods: { // 定義方法 },computed: { // 定義計算屬性 },watch: { // 定義偵聽器 }}
</script>

組合式API

????????相比于選項式API，組合式API是將組件中的數據、方法、計算屬性、偵聽器等代碼全部組合在一起，寫在setup()函數中。

????????格式：

<script>
import { computed, watch } from 'vue'
export default {setup() {const 數據名 = 數據值const 方法名 = () => {}const 計算屬性名 = computed(() => {})watch(偵聽器的來源, 回調函數, 可選參數)return { 數據名, 方法名, 計算屬性名 }}
}
</script>

????????Vue還提供了setup語法糖，用于簡化組合式API的代碼。使用setup語法糖時，組合式API的語法格式如下：

<script setup>
import { computed, watch } from 'vue'
// 定義數據
const 數據名 = 數據值
// 定義方法
const 方法名 = () => {}
// 定義計算屬性
const 計算屬性名 = computed(() => {})
// 定義偵聽器
watch(偵聽器的來源, 回調函數, 可選參數)
</script>

選項式API和組合式API的關系

????????Vue提供的選項式API和組合式API這兩種寫法可以覆蓋大部分的應用場景，它們是同一底層系統所提供的兩套不同的接口。選項式API是在組合式API的基礎上實現的。

????????企業在開發大型項目時，隨著業務復雜度的增加，代碼量會不斷增加。

????????如果使用選項式API，整個項目邏輯不易閱讀和理解，而且查找對應功能的代碼會存在一定難度。

????????如果使用組合式API，可以將項目的每個功能的數據、方法放到一起，這樣不管項目的大小，都可以快速定位到功能區域的相關代碼，便于閱讀和維護。同時，組合式API可以通過函數來實現高效的邏輯復用，這種形式更加自由，需要開發者有較強的代碼組織能力和拆分邏輯能力。