什麼是 Vue?#
Vue (發音為 /vjuː/,類似 view) 是一款用于建構使用者界面的 JavaScript 架構。它基于标準 HTML、CSS 和 JavaScript 建構,并提供了一套聲明式的、元件化的程式設計模型,幫助你高效地開發使用者界面。無論是簡單還是複雜的界面,Vue 都可以勝任。
下面是一個最基本的示例:
js
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
template
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
結果展示
Count is: 0
上面的示例展示了 Vue 的兩個核心功能:
- 聲明式渲染:Vue 基于标準 HTML 拓展了一套模闆文法,使得我們可以聲明式地描述最終輸出的 HTML 和 JavaScript 狀态之間的關系。
- 響應性:Vue 會自動跟蹤 JavaScript 狀态并在其發生變化時響應式地更新 DOM。
你可能已經有了些疑問——先别急,在後續的文檔中我們會詳細介紹每一個細節。現在,請繼續看下去,以確定你對 Vue 作為一個架構到底提供了什麼有一個宏觀的了解。
預備知識
文檔接下來的内容會假設你對 HTML、CSS 和 JavaScript 已經基本熟悉。如果你對前端開發完全陌生,最好不要直接從一個架構開始進行入門學習——最好是掌握了基礎知識再回到這裡。你可以通過這篇 JavaScript 概述來檢驗你的 JavaScript 知識水準。如果之前有其他架構的經驗會很有幫助,但也不是必須的。
漸進式架構#
Vue 是一個架構,也是一個生态。其功能覆寫了大部分前端開發常見的需求。但 Web 世界是十分多樣化的,不同的開發者在 Web 上建構的東西可能在形式和規模上會有很大的不同。考慮到這一點,Vue 的設計非常注重靈活性和“可以被逐漸內建”這個特點。根據你的需求場景,你可以用不同的方式使用 Vue:
- 無需建構步驟,漸進式增強靜态的 HTML
- 在任何頁面中作為 Web Components 嵌入
- 單頁應用 (SPA)
- 全棧 / 服務端渲染 (SSR)
- Jamstack / 靜态站點生成 (SSG)
- 開發桌面端、移動端、WebGL,甚至是指令行終端中的界面
如果你是初學者,可能會覺得這些概念有些複雜。别擔心!了解教程和指南的内容隻需要具備基礎的 HTML 和 JavaScript 知識。即使你不是這些方面的專家,也能夠跟得上。
如果你是有經驗的開發者,希望了解如何以最合适的方式在項目中引入 Vue,或者是對上述的這些概念感到好奇,我們在使用 Vue 的多種方式中讨論了有關它們的更多細節。
無論再怎麼靈活,Vue 的核心知識在所有這些用例中都是通用的。即使你現在隻是一個初學者,随着你的不斷成長,到未來有能力實作更複雜的項目時,這一路上獲得的知識依然會适用。如果你已經是一個老手,你可以根據實際場景來選擇使用 Vue 的最佳方式,在各種場景下都可以保持同樣的開發效率。這就是為什麼我們将 Vue 稱為“漸進式架構”:它是一個可以與你共同成長、适應你不同需求的架構。
單檔案元件#
在大多數啟用了建構工具的 Vue 項目中,我們可以使用一種類似 HTML 格式的檔案來書寫 Vue 元件,它被稱為單檔案元件 (也被稱為 *.vue 檔案,英文 Single-File Components,縮寫為 SFC)。顧名思義,Vue 的單檔案元件會将一個元件的邏輯 (JavaScript),模闆 (HTML) 和樣式 (CSS) 封裝在同一個檔案裡。下面我們将用單檔案元件的格式重寫上面的計數器示例:
vue
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
單檔案元件是 Vue 的标志性功能。如果你的用例需要進行建構,我們推薦用它來編寫 Vue 元件。你可以在後續相關章節裡了解更多關于單檔案元件的用法及用途。但你暫時隻需要知道 Vue 會幫忙處理所有這些建構工具的配置就好。
API 風格#
Vue 的元件可以按兩種不同的風格書寫:選項式 API 群組合式 API。
選項式 API (Options API)#
使用選項式 API,我們可以用包含多個選項的對象來描述元件的邏輯,例如 data、methods 和 mounted。選項所定義的屬性都會暴露在函數内部的 this 上,它會指向目前的元件執行個體。
vue
<script>
export default {
// data() 傳回的屬性将會成為響應式的狀态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用來更改狀态與觸發更新的函數
// 它們可以在模闆中作為事件監聽器綁定
methods: {
increment() {
this.count++
}
},
// 生命周期鈎子會在元件生命周期的各個不同階段被調用
// 例如這個函數就會在元件挂載完成後被調用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
在演練場中嘗試一下
組合式 API (Composition API)#
通過組合式 API,我們可以使用導入的 API 函數來描述元件邏輯。在單檔案元件中,組合式 API 通常會與 <script setup> 搭配使用。這個 setup attribute 是一個辨別,告訴 Vue 需要在編譯時進行一些處理,讓我們可以更簡潔地使用組合式 API。比如,<script setup> 中的導入和頂層變量/函數都能夠在模闆中直接使用。
下面是使用了組合式 API 與 <script setup> 改造後和上面的模闆完全一樣的元件:
vue
<script setup>
import { ref, onMounted } from 'vue'
// 響應式狀态
const count = ref(0)
// 用來修改狀态、觸發更新的函數
function increment() {
count.value++
}
// 生命周期鈎子
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 風格的對比以及組合式 API 所帶來的潛在收益。
如果你是使用 Vue 的新手,這裡是我們的大緻建議:
- 在學習的過程中,推薦采用更易于自己了解的風格。再強調一下,大部分的核心概念在這兩種風格之間都是通用的。熟悉了一種風格以後,你也能夠很快地了解另一種風格。
- 在生産項目中:
- 當你不需要使用建構工具,或者打算主要在低複雜度的場景中使用 Vue,例如漸進增強的應用場景,推薦采用選項式 API。
- 當你打算用 Vue 建構完整的單頁應用,推薦采用組合式 API + 單檔案元件。
在學習階段,你不必隻固守一種風格。在接下來的文檔中我們會為你提供一系列兩種風格的代碼供你參考,你可以随時通過左上角的 API 風格偏好來做切換。