Vue3進階主題Composition API使用詳解
Composition API 是 Vue3 中引入的一種新的 API 風格，旨在提高代碼的可讀性、可維護性和可重用性。Composition API 不同于 Vue2 中的 Options API，它采用了一種基于函數(shù)的編程方式，將組件內(nèi)的邏輯分解成更小的可組合函數(shù)單元，以實現(xiàn)更加靈活和高效的代碼組織方式。
為什么Vue3推薦使用Composition API
Vue3 推薦使用 Composition API 的主要原因是為了更好地組織和重用組件邏輯。
在 Vue2 中，我們通常使用 Options API，其中我們通過定義不同的選項（如 data、methods、computed 等）來定義組件的行為。這種方式存在一些缺點，例如：
大型組件變得難以維護，因為相關(guān)代碼被分散在不同的選項中。
大型組件可能會有重復(fù)的邏輯，因為代碼難以重用。
跟蹤哪些數(shù)據(jù)屬性被修改以及在何時修改它們可能變得困難。
我們下面舉個簡單例子, 以下代碼定義了一個用于獲取數(shù)據(jù)的邏輯：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { reactive, onMounted } from 'vue'import axios from 'axios'export function useData(url) {??const data = reactive({????loading: false,????error: null,????items: []??})??const fetchData = async () => {????data.loading = true????try {??????const response = await axios.get(url)??????data.items = response.data????} catch (error) {??????data.error = error.message????}????data.loading = false??}??onMounted(() => {????fetchData()??})??return {????data,????fetchData??}}可以看到，該邏輯包括了獲取數(shù)據(jù)的方法和處理加載狀態(tài)、錯誤信息等的邏輯。我們可以在多個組件中使用該邏輯，避免了重復(fù)的代碼。
例如，在一個組件中使用該邏輯：
1
2
3
4
5
6
7
8
9
import { useData } from './useData'export default {??setup() {????const { data } = useData('https://api.example.com/data')????return {??????data????}??}}當然, Vue2通過mixin也能實現(xiàn)上面的功能, 但可讀性和可維護性不如Composition API:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const dataMixin = {??data() {????return {??????loading: false,??????error: null,??????items: []????}??},??methods: {????fetchData() {??????this.loading = true??????axios.get(this.url)????????.then(response => {??????????this.items = response.data????????})????????.catch(error => {??????????this.error = error.message????????})????????.finally(() => {??????????this.loading = false????????})????}??},??mounted() {????this.fetchData()??}}然后在組件中使用:
1
2
3
4
5
6
7
8
export default {??mixins: [dataMixin],??data() {????return {??????url: 'https://api.example.com/data'????}??}}可以看到，使用mixin可以將公共的邏輯混入到組件中，但是混入存在一些問題，例如命名沖突、生命周期鉤子的調(diào)用順序等問題。
標簽：
