外觀
介紹
什麼是Vue？
Vue（發音為/vjuː/，類似於檢視）是一個用於構建使用者介面的JavaScript框架。它建立在標準的HTML、CSS和JavaScript之上，提供了一種宣告式、基於元件的程式設計模型，幫助您高效地開發任何複雜度的使用者介面。
以下是一個最小示例
js
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')template
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>結果
上述示例演示了Vue的兩個核心特性
宣告式渲染：Vue透過擴充套件標準的HTML，使用模板語法，允許我們根據JavaScript狀態宣告性地描述HTML輸出。
響應性：Vue會自動跟蹤JavaScript狀態變化，並在狀態變化時高效地更新DOM。
您可能已經有一些疑問 - 不要擔心。我們將在接下來的文件中涵蓋每一個細節。現在，請繼續閱讀，以便您對Vue能提供什麼有一個高層次的理解。
先決條件
本文件的其餘部分假設您對HTML、CSS和JavaScript有基本的瞭解。如果您是前端開發的初學者，直接從框架開始可能不是最佳選擇——先掌握基礎知識，然後再回來！如果需要，您可以透過以下概述來檢查您的知識水平：[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)、[HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 和 [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)。在其他框架方面的經驗有幫助，但不是必需的。
漸進式框架
Vue是一個框架和生態系統，涵蓋了前端開發所需的大部分常見功能。但網路極其多樣化——我們在網路上構建的東西在形式和規模上可能會有很大的差異。考慮到這一點，Vue被設計成靈活的，可以逐步採用。根據您的用例，Vue可以用不同的方式使用
- 無需構建步驟增強靜態HTML
- 嵌入為Web元件到任何頁面
- 單頁應用程式（SPA）
- 全棧/伺服器端渲染（SSR）
- 靜態站點生成（SSG）
- 針對桌面、移動、WebGL甚至終端
如果您覺得這些概念令人害怕，請不要擔心！教程和指南只需要基本的HTML和JavaScript知識，您應該能夠在不是這些領域的專家的情況下跟上。
如果您是一位有經驗的開發者，對如何將Vue最佳地整合到您的堆疊中感興趣，或者您對這些術語的含義感到好奇，我們在[使用Vue的方式](/guide/extras/ways-of-using-vue)中進行了更詳細的討論。
儘管具有靈活性，但關於Vue如何工作的核心知識在所有這些用例中都是通用的。即使您現在只是一個初學者，您在旅途中獲得的知識將隨著您成長並應對未來的更具雄心的目標而保持有用。如果您是一位老手，您可以根據您試圖解決的問題選擇最佳的Vue利用方式，同時保持相同的生產力。這就是我們為什麼稱Vue為“漸進式框架”：它是一個可以與您一起成長並適應您需求的框架。
單檔案元件
在大多數啟用構建工具的Vue專案中，我們使用類似於HTML的檔案格式來編寫Vue元件，稱為“單檔案元件”（也稱為*.vue檔案，簡稱SFC）。Vue SFC，正如其名稱所示，將元件的邏輯（JavaScript）、模板（HTML）和樣式（CSS）封裝在單個檔案中。以下是一個用SFC格式編寫的先前的示例
vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>SFC是Vue的一個定義性特徵，如果您的情況需要構建設定，它是編寫Vue元件的推薦方式。您可以在其專門的章節中瞭解更多關於SFC的如何和為什麼 - 但現在，只需知道Vue將為您處理所有的構建工具設定。
API樣式
Vue元件可以用兩種不同的API樣式來編寫：選項API和組合API。
選項API
使用選項API，我們使用諸如data、methods和mounted等選項物件來定義元件的邏輯。選項定義的屬性在函式內的this上暴露，它指向元件例項
vue
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event handlers in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>組合API
使用組合式API，我們透過匯入的API函式定義元件的邏輯。在SFC中，組合式API通常與<script setup>一起使用。`setup`屬性是一個提示，使得Vue在編譯時進行轉換，讓我們能夠以更少的樣板程式碼使用組合式API。例如，在`<script setup>`中宣告的匯入和頂級變數/函式可以直接在模板中使用。
這是一個相同的元件，具有完全相同的模板，但使用了組合式API和`<script setup>`。
vue
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>如何選擇？
這兩種API風格都能夠全面覆蓋常見的用例。它們是兩種由相同底層系統支援的不同介面。事實上，選項API是在組合式API之上實現的！兩種風格的基本概念和Vue的知識是共通的。
選項API圍繞“元件例項”的概念（如在示例中看到的`this`），這對於來自面嚮物件語言背景的使用者來說通常與基於類的思維模型更吻合。它也更易於入門，透過抽象反應性細節並透過選項組強制執行程式碼組織。
組合式API圍繞在函式作用域中直接宣告反應性狀態變數，並將多個函式組合起來以處理複雜性。它更靈活，需要理解Vue中反應性的工作原理才能有效使用。作為交換，其靈活性使得組織和使用邏輯的強大模式成為可能。
您可以在組合式API FAQ中瞭解更多關於兩種風格之間的比較以及組合式API的潛在好處。
如果您是Vue的新手，以下是我們的一般建議
出於學習目的，選擇您更容易理解的風格。再次強調，兩個風格之間的核心概念大多是共享的。您以後總是可以選擇另一種風格。
對於生產使用
如果您不使用構建工具，或者計劃在低複雜性場景中主要使用Vue，請使用選項API，例如漸進式增強。
如果您計劃使用Vue構建完整的應用程式，請使用組合式API + 單檔案元件。
在學習階段，您不必只承諾使用一種風格。其餘的文件將在適用的情況下提供兩種風格的程式碼示例，並且您可以透過左側側邊欄頂部的API偏好開關在任何時候在這兩種風格之間切換。
還有其他問題嗎？
檢視我們的FAQ。
選擇您的學習路徑
不同的開發者有不同的學習風格。請隨意選擇一個符合您偏好的學習路徑——儘管我們建議如果可能的話，最好全面瞭解所有內容！