在閱讀 Vue 官方文件的時候,會一直看到 SFC,那什麼是 SFC?
SFC 是 Single-File Component 的縮寫,也就是 Vue 專案中常見的 .vue
檔,是 Vue 的一大特色。
Vue SFC 檔案內可以封裝單一元件的:
<script>
)<template>
)<style>
)直接來看看常見的 .vue
程式碼架構:
<script>
import { ref } from "vue";
export default {
setup() {
const greeting = ref("第六天而已,還好嗎?");
return {
greeting,
};
},
};
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
前面提到 .vue
內一般會包含三個區塊(模板/邏輯/樣式),先來看一下詳細的規定:
<template>
.vue
最多只能有一個 <template>
@vue/compiler-dom
預編譯成 JavaScript 的渲染函式<script>
.vue
最多只能有一個 <script>
(不包含 <script setup>
)defineComponent
的回傳值。<script setup>
.vue
最多只能有一個 <script setup>
(不包含 <script>
)setup()
函式使用<style>
.vue
可以有多個 <style>
scope
和 module
屬性可以選用,也可在 SFC 內混合使用介紹在語言塊 tag 中常用到的屬性:
lang
lang
屬性來表明使用的語言:<script lang="ts"></script>
<template lang="pug"></template>
<style lang="scss"></style>
scoped
in <style>
<style>
標籤中可以使用 scoped
,表示樣式只要套用在當前元件,不會影響到其他元件,能避免 style 互相影響。<style lang="scss" scoped></style>
setup
in <script>
<script>
+ setup()
的寫法。<script setup></script>
除了以上三種類型的區塊(block),SFC 檔內還可以使用自訂的 blocks,但就要在建構工具中特別設定,告訴 vite「專案有自定義 block」,告訴他如何處理,舉例一個實際插件如 @intlify/vite-plugin-vue-i18n
,就有自訂 <i18n>
block,讓開發者可以在裡面定義多國語系,使用文件。
.vue
檔會如何被解析murmur: 其實這件事對新手來說並不是很重要啦,但因為我很好奇。
瀏覽器並不認識 .vue
檔,在開發期間,我們不能像以前一樣直接透過 live server 在瀏覽器上預覽專案,這也是為什麼我們需要用到 Vite 或 Vue Cli 等建構工具,建構工具會根據 Vue 提供的 loader - @vue/compiler-sfc
來編譯 .vue
檔。
所以 .vue
檔是怎麼被解析編譯的?
可能跟你想的不太一樣。
(至少跟我一開始想的不太一樣啦,我一開始以為他會把每個 哈哈哈哈哈(用笑聲掩飾尷尬)).vue
檔的 <template>
剪下來接在一起
SFC 中 <script>
和 <template>
的內容會被編譯成渲染函式,每次要用到該元件或頁面時,就會呼叫這個渲染函式。(這也是為什麼我們可以在元件中 import 其他 .vue
檔,因為每個 .vue
檔最終都是一個 JavaScript 模組)
SFC 中 <style>
的部份:
<style>
tag 的方式掛載,以支援熱更新(hot update)。.css
檔案中,請參考 Day 4: 從 npm run build (vite build) 簡單認識打包。✓ 建構工具為 vite
✓ 啟動本地伺服器 (npm run dev
)
✓ 使用預設設定,沒有特別做調整
讓我們打開瀏覽器來看看~
是不是看到很多熟悉的名字?
:欸,他後面明明就是 .vue
?說好的不認識?
「雖然他還有 .vue
,但你再仔細看看他,他已經是 .js
了。」
點擊檔案後,可以從右邊欄位看到 .vue
檔被編譯過的結果,像是最熟悉的陌生人,可以依稀看到當初的模樣。
在開發環境(development),會用 <style>
tag 的方式掛載 .vue
中的樣式,這件事會由一個 Javascript module 來處理,以支援熱更新(hot update)。
將開發者工具切回 Elements,<head>
內確實被插入多個 <style>
tag,可以點開看看內容,基本上每個 SFC 檔都有對應的 <style>
tag。
::::::warning::::::
注意是用 Vite 啟動本地開發環境(npm run dev
) 時,才會看到類似上面的結果。
.vue
的方式是一樣的,但 Vue Cli 在開發期間就已經把所有檔案 bundle 在一起,所以沒辦法從瀏覽器看到單獨 vue
檔編譯後的樣子。npm run build
(vite build) 和 preview 的結果,可以到 Day 4: 從 npm run build (vite build) 簡單認識打包 看看。明天會進一步說明 Vue 3 的語法糖 <script setup>
!