Vue 3.0采用的Composition API與Vue 2.x使用的Options API在編寫Vue組件時有一些區(qū)別。

區(qū)別：

1. 組織代碼的方式不同：

   • Options API：按照選項進(jìn)行組織，將數(shù)據(jù)、計算屬性、方法等聲明在一個對象中。
   • Composition API：按照邏輯功能進(jìn)行組織，將相關(guān)邏輯代碼放在一個函數(shù)中。

2. 數(shù)據(jù)和方法的訪問方式不同：

   • Options API：通過this關(guān)鍵字訪問數(shù)據(jù)和方法。
   • Composition API：通過引入具體的函數(shù)進(jìn)行數(shù)據(jù)和方法的處理。

作用：

• Options API：提供了一種簡潔明了的方式來定義和組織組件的選項（data、methods、computed等），適合于小型應(yīng)用或簡單的組件。
• Composition API：通過將邏輯相關(guān)的代碼封裝在函數(shù)中，提供更靈活的組織方式，使得代碼復(fù)用、組織和測試更加方便，特別適合于大型應(yīng)用或復(fù)雜的組件。

使用：

? ? ? ? 1.

<template><div><p>{{ message }}</p><button @click="changeMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: 'Hello Vue'};},methods: {changeMessage() {this.message = 'New Message';}}
};
</script>

? ? ? ? 2.Composition API 示例：

<template><div><p>{{ message }}</p><button @click="changeMessage">Change Message</button></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const state = reactive({message: 'Hello Vue'});const changeMessage = () => {state.message = 'New Message';};return {...state,changeMessage};}
};
</script>

在Composition API示例中，使用reactive函數(shù)將數(shù)據(jù)變?yōu)轫憫?yīng)式，并利用setup()函數(shù)組織邏輯代碼。通過返回一個包含數(shù)據(jù)和方法的對象，讓它們可以在模板中被訪問。

通過Composition API，我們可以將相關(guān)的代碼邏輯進(jìn)行封裝并復(fù)用，使得代碼更加清晰、可維護性更強。此外，Composition API還提供了其他一些函數(shù)，如computed、watch等，用于處理計算屬性和監(jiān)聽數(shù)據(jù)變化等操作。