Vue 單文件組件 SFC

Vue 單文件組件 (Single File Components, SFC) 是 Vue.js 提供的一種組件格式，允許開發者在一個文件中編寫組件的模板、腳本和樣式。SFC 通常以 .vue 文件爲擴展名。以下是 SFC 的工作原理和其各個部分的詳細解釋：

SFC 文件結構

一個典型的 Vue SFC 文件包含三個部分：

  1. 模板 (<template>)：定義組件的 HTML 結構。2. 腳本 (<script>)：定義組件的邏輯、數據和方法。3. 樣式 (<style>)：定義組件的樣式。

例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>
<style scoped>
.example {
  color: red;
}
</style>
                                  +--------------------+
                                  |                    |
                                  |  script transform  |
                           +----->+                    |
                           |      +--------------------+
                           |
+--------------------+     |      +--------------------+
|                    |     |      |                    |
|  facade transform  +----------->+ template transform |
|                    |     |      |                    |
+--------------------+     |      +--------------------+
                           |
                           |      +--------------------+
                           +----->+                    |
                                  |  style transform   |
                                  |                    |
                                  +--------------------+
// main script
import script from '/project/foo.vue?vue&type=script'
// template compiled to render function
import { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'
// css
import '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'
// attach render function to script
script.render = render
// attach additional metadata
// some of these should be dev only
script.__file = 'example.vue'
script.__scopeId = 'xxxxxx'
// additional tooling-specific HMR handling code
// using __VUE_HMR_API__ global
export default script

編譯過程

Vue SFC 的編譯過程通常由構建工具（如 webpack 或 Vite）處理，這些工具會使用特定的加載器（如 vue-loader 或 @vitejs/plugin-vue）來解析和編譯 SFC 文件。以下是編譯過程的基本步驟：

  1. 解析 SFC 文件：構建工具讀取 .vue 文件，並將其分解爲模板、腳本和樣式三個部分。2. 編譯模板：模板部分會被編譯爲渲染函數（render function），這是 Vue 內部使用的一種高效的渲染機制。3. 處理腳本：腳本部分通常會被直接導入並執行，生成組件的邏輯部分。4. 處理樣式：樣式部分會被編譯爲 CSS，並注入到頁面中。如果使用了 scoped 屬性，樣式會被作用域化，以確保它們隻影響當前組件。5. 生成模塊：最終，構建工具生成一個包含模板、腳本和樣式的 JavaScript 模塊，該模塊可以在應用中被導入和使用。

熱模塊替換 (HMR)

爲了提升開發體驗，Vue SFC 支持熱模塊替換 (HMR)：

• 模板更新：模板更新時，Vue 會重新編譯模板並更新渲染函數，但不會重置組件的狀態。• 樣式更新：樣式更新時，新的樣式會被注入到頁面中，而無需重新渲染組件。• 腳本更新：腳本更新時，組件會重新加載，但可以通過保存組件的狀態來避免完全重置。

示例

假設我們有一個簡單的 Vue SFC 文件 HelloWorld.vue：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'Hello, World!'
    };
  }
};
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

在構建過程中：

  1. 模板部分會被編譯爲渲染函數。2. 腳本部分會被處理爲一個 JavaScript 模塊，包含組件的邏輯。3. 樣式部分會被編譯爲 CSS，並注入到頁面中，確保樣式隻影響當前組件。

總結

Vue 單文件組件通過將模板、腳本和樣式集中在一個文件中，提供了良好的組件化開發體驗。構建工具通過解析和編譯 SFC 文件，將其轉換爲高效的 JavaScript 模塊，並支持熱模塊替換以提升開發效率。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/IPBogeq7Syy1LxJoEvdOMA

猜你喜歡