Vue 是一個(gè)用於建立使用者介面的 JavaScript 框架。它建立在標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 之上，並提供基於元件的聲明性程式設(shè)計(jì)模型，可幫助您有效率地開(kāi)發(fā)任何複雜性的使用者介面。
Vue 元件可以用兩種API 風(fēng)格編寫(xiě)：Options API 和Composition API（在2.6 版本以上引入），這兩種方法都有其獨(dú)特的優(yōu)點(diǎn)和缺點(diǎn)，為您的專案選擇正確的一種可能是一個(gè)艱難的決定。

讓我們深入探討這兩種理解方式

選項(xiàng)API：
Options API 是建立 Vue 元件的傳統(tǒng)方式。它使用一組選項(xiàng)（例如資料、方法和計(jì)算屬性）定義組件的行為和狀態(tài)。
data()：此函數(shù)傳回一個(gè)包含元件的反應(yīng)資料屬性的物件。當(dāng)這些屬性的值發(fā)生變化時(shí)，它們將更新元件的渲染輸出。
methods()：此函數(shù)傳回一個(gè)對(duì)象，其中包含可在組件的模板或其他方法中使用的方法（函數(shù)）。這些方法可以操縱資料或執(zhí)行操作。
計(jì)算屬性：這些函數(shù)根據(jù)組件的資料傳回一個(gè)值。每當(dāng)它們的任何依賴項(xiàng)（反應(yīng)性資料屬性）發(fā)生變化時(shí)，它們都會(huì)被重新計(jì)算。
Options API 的主要優(yōu)點(diǎn)之一是它簡(jiǎn)單且易於理解。它遵循許多開(kāi)發(fā)人員所熟悉的清晰的聲明式模式，並且在 Vue 文件中有詳細(xì)記錄。這對(duì)於剛開(kāi)始使用 Vue 的初學(xué)者來(lái)說(shuō)是一個(gè)不錯(cuò)的選擇。

但是，Options API 有一些限制，可能使其難以用於更複雜的專案。
Options API 的另一個(gè)限制是，在元件之間共用邏輯時(shí)，它可能不夠靈活。
使用 Options API 建立的單元測(cè)試元件可能更具挑戰(zhàn)性。邏輯在不同選項(xiàng)之間的分佈使得隔離特定功能進(jìn)行測(cè)試變得更加困難。

讓我們看看 Options API 樣式的範(fàn)例：

<template>
    <div>
        <h4>{{ name }}'s To Do List</h4>
        <div>
            <input v-model="newItemText" v-on:keyup.enter="addNewTodo" />
            <button v-on:click="addNewTodo">Add</button>
            <button v-on:click="removeTodo">Remove</button>
        </div>
        <ul>
            <li v-for="task in tasks" v-bind:key="task">{{ task }}</li>
        </ul>
    </div>
</template>
<script>
    export default { 
    data() { 
           return 
               {  name: "John", 
                  tasks: ["Buy groceries", "Clean the house"], 
                  newItemText: "", 
                };
            }, 
   methods: { 
          addNewTodo() 
            { 
               if (this.newItemText !== "") 
                {  this.tasks.push(this.newItemText); 
                   this.newItemText = ""; 
                } 
            }, 
         removeTodo(index) { this.tasks.splice(index, 1); }, }, };
</script>

1. 組合API：

Composition API 是 Vue 3 中引入的一組工具（可透過(guò)外掛程式用於 Vue 2），與傳統(tǒng)的 Options API 相比，它提供了另一種編寫(xiě)元件邏輯的方法。它專注於組合可重複使用的函數(shù)來(lái)管理元件的狀態(tài)和行為。
透過(guò) Composition API，我們使用導(dǎo)入的 API 函數(shù)定義元件的邏輯。它還允許開(kāi)發(fā)人員使用 JavaScript 的全部功能來(lái)定義元件行為。
組合 API 通常與 . setup 屬性是一個(gè)提示，使 Vue 執(zhí)行編譯時(shí)轉(zhuǎn)換，使我們能夠使用更少樣板的 Composition API。
Composition API 的基礎(chǔ)是 Vue 內(nèi)建的反應(yīng)系統(tǒng)。 ref 和reactive 等函數(shù)會(huì)建立反應(yīng)性數(shù)據(jù)，當(dāng)元件發(fā)生變化時(shí)，這些數(shù)據(jù)會(huì)自動(dòng)更新元件。與在選項(xiàng) API 中手動(dòng)設(shè)定 getter 和 setter 相比，這簡(jiǎn)化了狀態(tài)管理。
Composition API 透過(guò)provide 和inject 等函數(shù)支援依賴注入。
Composition API 特別有利於：

建構(gòu)複雜且可重複使用的元件
優(yōu)先考慮程式碼組織和可維護(hù)性的專案
利用 TypeScript 實(shí)作類型安全的應(yīng)用程式
Composition API 似乎是最好的選擇。然而，Composition API 也並非沒(méi)有缺點(diǎn)。一個(gè)問(wèn)題是，對(duì)於不熟悉函數(shù)式、響應(yīng)式程式設(shè)計(jì)的開(kāi)發(fā)人員來(lái)說(shuō)，學(xué)習(xí)可能會(huì)更加困難。
另一個(gè)問(wèn)題是 Composition API 預(yù)設(shè)不向後相容 Vue 2.6 及以下版本。這意味著您需要升級(jí)到 Vue 3.0 或透過(guò)外掛程式匯入 Composition API。

讓我們看看 Composition API 樣式的範(fàn)例：

以上是了解 Vue.js 中 API 的樣式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！