Vue.js

外觀

本頁內容

術語表 ​

本術語表旨在提供一些關於在討論Vue時常見技術術語含義的指導。它旨在描述術語的常用用法，而不是對如何使用它們的規範性規定。某些術語根據周圍環境可能具有略微不同的含義或細微差別。

非同步元件 ​

非同步元件是另一個元件的包裝器，允許被包裝的元件進行懶載入。這通常用作減少構建的.js檔案大小的方法，將它們分割成更小的塊，只有當需要時才進行載入。

Vue Router也具有類似的功能，用於路由元件的懶載入，但這並不使用Vue的非同步元件功能。

更多資訊請參閱

編譯宏 ​

編譯宏是編譯器處理的特殊程式碼，並將其轉換為其他內容。它們實際上是字串替換的一種巧妙形式。

Vue的SFC編譯器支援各種宏，例如defineProps()、defineEmits()和defineExpose()。這些宏有意設計成看起來像正常的JavaScript函式，以便可以利用圍繞JavaScript/TypeScript的相同解析器和型別推斷工具。然而，它們不是在瀏覽器中執行的真正函式。這些是編譯器檢測並替換為實際將在瀏覽器中執行的真正JavaScript程式碼的特殊字串。

宏的使用有限制，這些限制不適用於正常JavaScript程式碼。例如，你可能認為const dp = defineProps可以讓你為defineProps建立別名，但實際上會導致錯誤。此外，對傳遞給defineProps()的值也有限制，因為“引數”必須由編譯器處理，而不是在執行時處理。

更多資訊請參閱

元件 ​

術語元件並非Vue獨有，它對許多UI框架都很常見。它描述了UI的一部分，例如按鈕或複選框。元件也可以組合成更大的元件。

元件是Vue提供的主要機制，用於將UI分割成更小的部分，既為了提高可維護性，也為了允許程式碼複用。

Vue元件是一個物件。所有屬性都是可選的，但元件要渲染，則需要一個模板或渲染函式。例如，以下物件將是一個有效的元件

js
const HelloWorldComponent = {
  render() {
    return 'Hello world!'
  }
}

在實際應用中，大多數Vue應用都是使用單檔案元件（.vue檔案）編寫的。儘管這些元件最初可能看起來不像物件，但SFC編譯器會將它們轉換為物件，並作為檔案的預設匯出使用。從外部角度來看，一個.vue檔案只是一個匯出一個元件物件的ES模組。

元件物件的屬性通常被稱為選項。這就是選項API得名的由來。

元件的選項定義瞭如何建立該元件的例項。元件在概念上類似於類，儘管Vue並不使用實際的JavaScript類來定義它們。

“元件”一詞也可以更寬鬆地用來指代元件例項。

更多資訊請參閱

“元件”一詞還出現在其他幾個術語中

組合式​

組合式一詞描述了Vue中的一種常見用法模式。它不是Vue的一個獨立特性，只是使用框架的組合API的一種方式。

  • 組合式是一個函式。
  • 組合式用於封裝和複用有狀態的邏輯。
  • 函式名稱通常以use開頭，以便其他開發者知道它是一個組合式。
  • 通常期望在元件的setup()函式的同步執行期間（或者等價地，在<script setup>塊執行期間）呼叫該函式。這使組合式的呼叫與當前元件上下文相關聯，例如透過呼叫provide()、inject()或onMounted()。
  • 組合式通常返回一個普通物件，而不是響應式物件。該物件通常包含引用和函式，並期望在呼叫程式碼中解構。

與許多模式一樣，人們可能會對特定的程式碼是否符合該標籤存在一些分歧。並非所有的JavaScript實用函式都是組合式。如果一個函式沒有使用組合API，那麼它可能不是組合式。如果一個函式不需要在setup()的同步執行期間被呼叫，那麼它可能不是組合式。組合式專門用於封裝有狀態的邏輯，它們不僅僅是函式的命名約定。

有關編寫組合式的更多詳細資訊，請參閱指南 - 組合式。

組合API ​

組合API是一組用於在Vue中編寫元件和組合式的函式。

該術語還用於描述編寫元件的兩種主要風格之一，另一種是選項API。使用組合API編寫的元件使用<script setup>或顯式的setup()函式。

有關更多資訊，請參閱組合API常見問題解答。

自定義元素 ​

自定義元素是Web元件標準的一個特性，它在現代瀏覽器中得到實現。它指的是在HTML標記中使用自定義HTML元素來在頁面中包含Web元件的能力。

Vue內建了對自定義元素的支援，並允許它們在Vue元件模板中直接使用。

不要將自定義元素與在另一個Vue元件的模板中將Vue元件作為標籤包含的能力混淆。自定義元素用於建立Web元件，而不是Vue元件。

更多資訊請參閱

指令 ​

指令一詞指的是以v-字首開始的模板屬性，或它們的等效簡寫。

內建指令包括v-if、v-for、v-bind、v-on和v-slot。

Vue還支援建立自定義指令，儘管它們通常僅用作直接操作DOM節點的“逃生門”。自定義指令通常不能用於重新建立內建指令的功能。

更多資訊請參閱

動態元件 ​

術語“動態元件”用於描述需要動態選擇要渲染的子元件的情況。通常，這是透過使用<component :is="type">來實現的。

動態元件不是一種特殊的元件型別。任何元件都可以用作動態元件。是元件的選擇是動態的，而不是元件本身。

更多資訊請參閱

效果 ​

請參閱響應式效果和副作用。

事件 ​

使用事件在程式的不同部分之間進行通訊是程式設計的許多不同領域的常見做法。在Vue中，該術語通常應用於原生HTML元素事件和Vue元件事件。在模板中，使用v-on指令來監聽這兩種型別的事件。

更多資訊請參閱

片段 ​

術語“片段”指的是一種特殊的VNode，它用作其他VNode的父節點，但本身不渲染任何元素。

該名稱來自原生DOM API中類似的概念DocumentFragment。

片段用於支援具有多個根節點的元件。儘管這些元件可能看起來有多個根，但實際上它們在幕後使用一個片段節點作為單個根，作為“根”節點的父節點。

片段還由模板編譯器用作包裝多個動態節點的方式，例如透過v-for或v-if建立的節點。這允許向VDOM補丁演算法傳遞額外提示。這其中的大部分是內部處理的，但您可能直接遇到這種情況是在使用帶有v-for的<template>標籤上的key時。在這種情況下，key被新增為片段VNode的prop。

片段節點目前被渲染為DOM中的空文字節點，儘管這是一個實現細節。如果您使用$el或嘗試使用內建瀏覽器API遍歷DOM，您可能會遇到這些文字節點。

函式元件 ​

元件定義通常是一個包含選項的物件。如果您正在使用<script setup>，它可能看起來不是這樣，但從.vue檔案匯出的元件仍然是一個物件。

一個函式元件是使用函式宣告的元件的另一種形式。該函式充當元件的渲染函式。

功能元件不能擁有自己的狀態。它也不經過常規的元件生命週期，因此不能使用生命週期鉤子。這使得它們比普通的有狀態元件要輕量一些。

更多資訊請參閱

提升 ​

術語“提升”用來描述在到達之前，在其它程式碼之前執行某段程式碼。執行被“拉到”更早的點。

JavaScript使用提升來處理一些結構，例如var、import和函式宣告。

在Vue環境中，模板編譯器應用靜態提升來提高效能。當將模板轉換為渲染函式時，對應於靜態內容的VNodes可以建立一次並重復使用。這些靜態VNodes被稱為提升，因為它們是在渲染函式執行之前建立的。類似的提升形式也應用於由模板編譯器生成的靜態物件或陣列。

更多資訊請參閱

DOM內模板 ​

指定元件模板的方法有很多種。在大多數情況下，模板以字串的形式提供。

術語DOM內模板指的是模板以DOM節點形式提供，而不是字串。Vue隨後使用innerHTML將這些DOM節點轉換為模板字串。

通常，DOM內模板最初是直接寫在頁面HTML中的HTML標記。然後瀏覽器將其解析為DOM節點，Vue隨後使用這些節點讀取innerHTML。

更多資訊請參閱

注入 ​

見提供/注入。

生命週期鉤子 ​

Vue元件例項會經歷一個生命週期。例如，它被建立、掛載、更新和解除安裝。

生命週期鉤子是監聽這些生命週期事件的一種方式。

使用Options API，每個鉤子都作為單獨的選項提供，例如mounted。Composition API使用函式，如onMounted()。

更多資訊請參閱

宏 ​

見編譯器宏。

具名插槽 ​

元件可以有多個插槽，透過名稱區分。除了預設插槽之外的插槽被稱為具名插槽。

更多資訊請參閱

Options API ​

Vue元件使用物件定義。這些元件物件的屬性被稱為選項。

元件可以以兩種風格編寫。一種風格結合使用Composition API和setup（透過setup()選項或<script setup>）。另一種風格幾乎不直接使用Composition API，而是使用各種元件選項來達到類似的效果。以這種方式使用的元件選項被稱為Options API。

Options API包括如data()、computed、methods和created()等選項。

一些選項，如props、emits和inheritAttrs，可以在使用任一API編寫元件時使用。由於它們是元件選項，可以認為它們是Options API的一部分。然而，由於這些選項還可以與setup()一起使用，通常認為它們是兩種元件風格的共享部分。

setup()函式本身是元件選項，因此可以描述為Options API的一部分。然而，這並不是“Options API”這個術語通常的用法。相反，setup()函式被認為是Composition API的一部分。

外掛​

雖然“外掛”一詞可以在許多不同的上下文中使用，但Vue將外掛視為嚮應用程式新增功能的一種方式。

透過呼叫app.use(plugin)將外掛新增到應用程式中。外掛本身是一個函式或具有install函式的物件。該函式將傳入應用程式例項，然後可以執行所需的所有操作。

更多資訊請參閱

prop ​

在Vue中，“prop”一詞有三個常見的用法

  • 元件props
  • VNode props
  • 插槽props

元件props是大多數人認為的props。這些是透過defineProps()或props選項顯式定義的。

VNode props一詞指的是傳遞給h()的第二個引數的物件的屬性。這些可以包括元件props，但也可以包括元件事件、DOM事件、DOM屬性和DOM屬性。你通常只會在使用渲染函式直接操作VNodes時遇到VNode props。

插槽props是指傳遞給作用域插槽的屬性。

在所有情況下，props是從其他地方傳入的屬性。

雖然“props”一詞來源於“properties”，但在Vue的上下文中，“props”一詞有更具體的含義。你應該避免將其用作“properties”的縮寫。

更多資訊請參閱

provide / inject ​

provide和inject是一種元件間通訊的形式。

當元件提供一個值時，該元件的所有後代都可以選擇使用inject來獲取該值。與props不同，提供值的元件不知道確切是哪個元件接收了該值。

provide和inject有時用於避免prop drilling。它們還可以用作元件與其槽內容通訊的隱式方式。

provide還可以在應用程式級別使用，使一個值對應用程式中的所有元件都可用。

更多資訊請參閱

reactive effect ​

reactive effect是Vue反應性系統的一部分。它指的是跟蹤函式的依賴關係並在這些依賴關係的值發生變化時重新執行該函式的過程。

watchEffect()是建立效果的最直接方式。Vue的許多其他部分都使用效果內部。例如，元件渲染更新、computed()和watch()。

Vue只能在反應性效果中跟蹤反應性依賴項。如果一個屬性的值在反應性效果之外被讀取，它將“失去”反應性，也就是說，Vue將不知道在屬性隨後更改時該怎麼做。

該術語源自“副作用”。當屬性值改變時，呼叫效果函式是改變屬性值的副作用。

更多資訊請參閱

響應性 ​

一般來說，響應性指的是根據資料變化自動執行操作的能力。例如，當資料值改變時，更新DOM或發起網路請求。

在Vue的上下文中，響應性用來描述一系列功能。這些功能組合形成一個響應性系統，透過響應性API進行暴露。

響應性系統可能有多種不同的實現方式。例如，可以透過對程式碼進行靜態分析來確定其依賴關係。然而，Vue並沒有採用這種響應性系統。

相反，Vue的響應性系統在執行時跟蹤屬性訪問。它透過屬性的兩個包裝器以及getter/setter函式來實現。

更多資訊請參閱

響應性API ​

響應性API 是與響應性相關的Vue核心函式集合。這些函式可以獨立於元件使用。它包括 ref()、reactive()、computed()、watch() 和 watchEffect() 等函式。

響應性API是組合API的子集。

更多資訊請參閱

ref ​

本條目介紹瞭如何使用 ref 實現響應性。有關模板中使用的 ref 屬性，請參閱模板ref。

ref 是Vue響應性系統的一部分。它是一個包含單個響應性屬性的物件，稱為 value。

存在各種不同型別的ref。例如，可以使用 ref()、shallowRef()、computed() 和 customRef() 建立refs。函式 isRef() 可以用來檢查一個物件是否是ref，而 isReadonly() 可以用來檢查ref是否允許直接賦值。

更多資訊請參閱

渲染函式 ​

渲染函式 是元件生成渲染期間使用的VNodes的部分。模板被編譯成渲染函式。

更多資訊請參閱

排程器 ​

排程器 是Vue內部控制響應性效果執行時間的一部分。

當響應性狀態改變時，Vue不會立即觸發渲染更新。相反，它會將它們一起分組使用佇列。這確保了元件只重新渲染一次，即使對底層資料進行多次更改。

觀察者 也使用排程器佇列進行分組。具有 flush: 'pre'（預設）的觀察者在元件渲染之前執行，而具有 flush: 'post' 的觀察者將在元件渲染之後執行。

排程器佇列中的作業還用於執行各種其他內部任務，例如觸發一些 生命週期鉤子 和更新 模板ref。

作用域插槽 ​

術語 作用域插槽 用來指代接收 屬性 的 插槽。

從歷史上看，Vue在作用域插槽和非作用域插槽之間做出了很大的區分。在某種程度上，可以將它們視為兩個不同的功能，在共同的模板語法下統一起來。

在Vue 3中，插槽API被簡化，使得所有插槽都表現得像作用域插槽。然而，作用域插槽和非作用域插槽的使用場景通常不同，因此這個術語仍然作為指代帶有props的插槽的有用方式。

傳遞給插槽的props只能在父模板的特定區域內使用，該區域負責定義插槽的內容。這個模板區域作為props的變數作用域，因此得名“作用域插槽”。

更多資訊請參閱

SFC ​

參見 單檔案元件。

副作用 ​

術語“副作用”並不特指Vue。它用於描述超出其區域性作用域的操作或函式。

例如，在設定屬性如user.name = null的上下文中，預期這將改變user.name的值。如果它還做了其他事情，比如觸發Vue的反應性系統，那麼這將被描述為副作用。這是Vue中反應性副作用術語的起源。

當一個函式被描述為具有副作用時，意味著該函式執行了一些可以在函式外部觀察到的動作，而不僅僅是返回一個值。這可能意味著它更新了狀態中的值，或者觸發了網路請求。

這個術語通常用於描述渲染或計算屬性。渲染被認為沒有副作用是最佳實踐。同樣，計算屬性的getter函式也不應有副作用。

單檔案元件 ​

術語“單檔案元件”或SFC，指的是Vue元件常用的.vue檔案格式。

參見

插槽 ​

插槽用於將內容傳遞給子元件。props用於傳遞資料值，而插槽用於傳遞更豐富的內容，包括HTML元素和其他Vue元件。

更多資訊請參閱

模板引用 ​

術語“模板引用”指的是在模板內的標籤上使用ref屬性。元件渲染後，此屬性用於將相應的屬性填充為模板中標籤對應的HTML元素或元件例項。

如果你使用的是Options API，那麼refs透過$refs物件的屬性暴露。

使用Composition API時，模板引用使用同名的響應式ref填充。

模板引用不應與Vue反應性系統中的響應式引用混淆。

更多資訊請參閱

VDOM ​

參見 虛擬DOM。

虛擬DOM ​

術語“虛擬DOM”（VDOM）並不特指Vue。它是多個Web框架用於管理UI更新的常用方法。

瀏覽器使用節點樹來表示頁面當前狀態。這個樹和與之互動的JavaScript API被稱為文件物件模型或DOM。

操作DOM是效能瓶頸之一。虛擬DOM提供了管理這一點的策略之一。

Vue元件不是直接建立DOM節點，而是生成它們希望建立的DOM節點描述。這些描述是普通的JavaScript物件，稱為VNode（虛擬DOM節點）。建立VNode相對便宜。

每次元件重新渲染時，新的VNode樹與之前的VNode樹進行比較，然後將任何差異應用到實際的DOM上。如果沒有變化，則不需要觸控DOM。

Vue採用了一種我們稱之為編譯器資訊虛擬DOM的混合方法。Vue的模板編譯器能夠根據模板的靜態分析應用效能最佳化。Vue不需要在執行時對元件的舊VNode樹和新VNode樹進行完整比較，而是可以使用編譯器提取的資訊，僅將比較減少到實際可以變化的樹的部分。

更多資訊請參閱

VNode ​

VNode是虛擬DOM節點。它們可以使用h()函式建立。

更多資訊請見虛擬DOM。

Web Component ​

Web Components標準是一組在現代瀏覽器中實現的功能集合。

Vue元件不是Web Components，但可以使用defineCustomElement()從Vue元件建立一個自定義元素。Vue還支援在Vue元件中使用自定義元素。

更多資訊請參閱

在GitHub上編輯此頁