Vue3學習-第二章單文件組件(SFC)

-Advertisement-

什麼是單文件組件？簡言之，單文件組件就是一個文件擴展名為.vue的single-file-components(SFC)。是Vue.js自定義的一種文件格式，一個.vue文件，就是一個單獨的組件，在文件內封裝了組件的相關代碼：HTML，CSS，JS。瀏覽器本身並不支持.vue文件，所以必須對.v ...

什麼是單文件組件？

簡言之，單文件組件就是一個文件擴展名為.vue的single-file-components(SFC)。是Vue.js自定義的一種文件格式，一個.vue文件，就是一個單獨的組件，在文件內封裝了組件的相關代碼：HTML，CSS，JS。

瀏覽器本身並不支持.vue文件，所以必須對.vue文件進行載入解析，此時需要vue-loader，類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等。
所以我們開發項目時，通常需要依賴webpack，vite等構建工具；

為什麼要用單文件組件？

在最早的Vue項目中，我們使用Vue.componnet來直接定義全局組件，使用new Vue(el: '#container')在每個頁面內指定一個容器元素，因為尾碼為.js，可以直接被瀏覽器支持；

這種方式通常運作在很多小規模的項目中，只用來加持特定的視圖（把Vue當成插件來使用）；

Vue.component("counter",{    //1.組件名為"conter"; 2.data 寫函數; 3.template 寫組件的內容（元素和觸發的事件）
    el:"#container",
    data:function(){
            return {count:0}
    },
    //template 是模板的意思，在 html 裡面是一個可以同時控制多個子元素的父元素。在這裡定義了組件的內容
    template:'<button v-on:click="count++">點擊計算點擊次數：{{count}}次</button>'
})

如上所示，這種寫法在稍大型的項目中，這種方式的弊端也很明顯：

全局定義（Global definitions）強制要求每個component中的命名不能重覆；
字元串模板（String templates）缺乏語法高亮，在HTML中有多行的時候，需要用到醜陋的\;
不支持CSS（No CSS Suport）CSS明顯被遺漏；
沒有構建步驟（No build step）限制只能使用HTML和ES5 Javascript，而不能使用預處理器，如 Pug (formerly Jade) 和 Babel (with ES2015 modules)，和 Stylus。；

單文件組件（SFC）長啥樣？

<template>
  <div class="example">{{ msg }}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
<style>
.example {
  color: red;
}
</style>
<custom1>
  這裡可以是，例如：組件的文檔
</custom1>

語言塊

<template>
- 每個.vue文件最多可同時包含一個頂層<template>塊。
- 其中的內容會被提取出來並傳遞給@vue/compiler-com,預編譯為Javascript的渲染函數，並附屬到導出的組件上作為其render選項；

<script>
- 每個vue文件最多可同時包含一個script塊（不包括<script setup>）;
- 該腳本將作為ES Module 來執行；
- 其預設導出的內容應該是Vue組件選項對象，它要麼是一個普通的對象，要麼是defineComponent的返回值；

<script setup>
- 每個vue文件最多可同時包含一個<script setup>塊（不包括<script>）;
- 該腳本會被預處理並作為組件的setup()函數使用，也就是說它會在每個組件實例中執行。
- <script setup>的頂層綁定會自動暴露給模板。

<style>
- 每個.vue文件最多可同時包含一個<style>塊。
- <style>標簽可以通過scoped或module attribute(更多詳情請查看 SFC 樣式特性)將樣式封裝在當前組件內，多個不同封裝模式的<style>標簽可以在同一個組件張混用；

自定義塊

為了滿足任何項目特定的需求，.vue文件中還可以包含額外的自定義塊，例如<docs>塊。自定義塊的一些真實場景的案例包括：

Gridsome:<page-query>
vite-plugin-vue-gql:<gql>
vue-i18n:<i18n>

對 Custom Block 的處理依賴於工具——如果你想要構建自己的自定義塊集成，更多詳情請查看 SFC 工具。

自動的name推斷

SFC 在下列情況會依據它的文件名來自動推斷組件名稱：

開發環境警告格式化
DevTools 檢查
遞歸的自引用。例如：名為FooBar的文件可以在模板中用<FooBar/>引用它自己。這種方式比明確註冊或引入的組件的優先順序要低。

預處理

塊可以使用lang attribute 聲明預處理語言。最常見的場景就是在<script>塊中使用 TypeScript：

<script lang="ts">
  // 使用 TypeScript
</script>

lang 可以用於任何塊——例如可以在<script>中使用 Sass 以及在<template>中使用 Pug：

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>

註意，基於不同的工具鏈，預處理器的集成方式有所不同。查看相關文檔以獲取示例：

Vite
Vue CLI
webpack + vue-loader

文件分離——src引入

如果你傾向於將*.vue組件拆分為多個文件，可以使用src attribute 來引入外部的文件作為語言塊：

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

註意src引入所需遵循的路徑解析規則與webpack模塊請求一致，即：

相對路徑需要以./開頭。
你可以從npm依賴中引入資源：

<!-- 從已安裝的 "todomvc-app-css" npm 包中引入文件 -->
<style src="todomvc-app-css/index.css">

src 引入也能用於自定義塊，例如：

<unit-test src="./unit-test.js"></unit-test>

註釋

在每個塊中，註釋應該使用相應語言(HTML, CSS, JavaScript, Pug,等等)的語法。對於頂層的註釋而言，使用 HTML 註釋語法：。

您的分享是我們最大的動力!