Vue 單文件組件 SFC
共 3608字，需瀏覽 8分鐘
·
2024-06-24 10:08
Vue 單文件組件 (Single File Components, SFC) 是 Vue.js 提供的一種組件格式，允許開發(fā)者在一個(gè)文件中編寫組件的模板、腳本和樣式。SFC 通常以 .vue 文件為擴(kuò)展名。以下是 SFC 的工作原理和其各個(gè)部分的詳細(xì)解釋：
SFC 文件結(jié)構(gòu)
一個(gè)典型的 Vue SFC 文件包含三個(gè)部分：
1.模板 (<template>)：定義組件的 HTML 結(jié)構(gòu)。2.腳本 (<script>)：定義組件的邏輯、數(shù)據(jù)和方法。3.樣式 (<style>)：定義組件的樣式。
例如：
<template><div class="example"><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 scriptimport script from '/project/foo.vue?vue&type=script'// template compiled to render functionimport { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'// cssimport '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'// attach render function to scriptscript.render = render// attach additional metadata// some of these should be dev onlyscript.__file = 'example.vue'script.__scopeId = 'xxxxxx'// additional tooling-specific HMR handling code// using __VUE_HMR_API__ globalexport default script
編譯過(guò)程
Vue SFC 的編譯過(guò)程通常由構(gòu)建工具（如 webpack 或 Vite）處理，這些工具會(huì)使用特定的加載器（如 vue-loader 或 @vitejs/plugin-vue）來(lái)解析和編譯 SFC 文件。以下是編譯過(guò)程的基本步驟：
1.解析 SFC 文件：構(gòu)建工具讀取 .vue 文件，并將其分解為模板、腳本和樣式三個(gè)部分。2.編譯模板：模板部分會(huì)被編譯為渲染函數(shù)（render function），這是 Vue 內(nèi)部使用的一種高效的渲染機(jī)制。3.處理腳本：腳本部分通常會(huì)被直接導(dǎo)入并執(zhí)行，生成組件的邏輯部分。4.處理樣式：樣式部分會(huì)被編譯為 CSS，并注入到頁(yè)面中。如果使用了 scoped 屬性，樣式會(huì)被作用域化，以確保它們只影響當(dāng)前組件。5.生成模塊：最終，構(gòu)建工具生成一個(gè)包含模板、腳本和樣式的 JavaScript 模塊，該模塊可以在應(yīng)用中被導(dǎo)入和使用。
熱模塊替換 (HMR)
為了提升開發(fā)體驗(yàn)，Vue SFC 支持熱模塊替換 (HMR)：
?模板更新：模板更新時(shí)，Vue 會(huì)重新編譯模板并更新渲染函數(shù)，但不會(huì)重置組件的狀態(tài)。?樣式更新：樣式更新時(shí)，新的樣式會(huì)被注入到頁(yè)面中，而無(wú)需重新渲染組件。?腳本更新：腳本更新時(shí)，組件會(huì)重新加載，但可以通過(guò)保存組件的狀態(tài)來(lái)避免完全重置。
示例
假設(shè)我們有一個(gè)簡(jiǎn)單的 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>
在構(gòu)建過(guò)程中：
1.模板部分會(huì)被編譯為渲染函數(shù)。2.腳本部分會(huì)被處理為一個(gè) JavaScript 模塊，包含組件的邏輯。3.樣式部分會(huì)被編譯為 CSS，并注入到頁(yè)面中，確保樣式只影響當(dāng)前組件。
總結(jié)
Vue 單文件組件通過(guò)將模板、腳本和樣式集中在一個(gè)文件中，提供了良好的組件化開發(fā)體驗(yàn)。構(gòu)建工具通過(guò)解析和編譯 SFC 文件，將其轉(zhuǎn)換為高效的 JavaScript 模塊，并支持熱模塊替換以提升開發(fā)效率。