VUE 是什麼

1. Declarative reading 宣告式---渲染使用js 語法在html的模板上使用

宣告式的渲染則是利用data的方式，集中管理資料，再將資料呈現在畫面，一但創建綁定了，
DOM將與data保持同步，當data中有修改，DOM會相應更新，這樣一來就是直接修改到data的資料，與DOM的更新分離開來更容易理解與撰寫

MVVM 概念

• View 畫面
• ViewModel 資料繫結器
• Model 資料狀態

Model有任何資料的改變，ViewModel會自動把資料綁定，渲染到View畫面上

2. Reactivity 響應式---當js有改變DOM的變化時，會自動更新

漸進式框架

何謂漸進式框架，在網路上找到的資源解釋

1. 根據需要的情境，使用適當的配置
2. 無須一次載入大包規範，例如單頁面就無需用到vue-router

單檔案文件(SFC)

Single-File Component（也稱為.vue檔案，縮寫為SFC）的類似HTML的檔案格式編寫Vue元件。將元件的邏輯（JavaScript）、模板（HTML）和樣式（CSS）封裝在一個<template>中。

使用SFC的選擇原因？

1. 使用html、css、JavaScript來撰寫
2. 關注點分離議題[註1]
3. 在同份template中開發CSS(scoped)[註2]
4. composition的語法更貼近使用
5. 通過交叉分析模板和腳本進行更多編譯時優化
6. Vscode + Volar 插件，特別用於模板表達式語法的亮色提醒
7. 支援即用的熱加載(Hot-Module Replacement / HMR)[註3]

使用SFC的方式

Vue SFC 是一種特訂的框架格式，需要由@vue/compiler-sfc 預編譯成瀏覽器懂的JavaScript\CSS，使用方式為import導入使用
CSS 在SFC開發過程中使用<style>標籤import使用，並支援熱加載，在最後build出來會被合併到一份CSS的檔案中。

[註1] 關注點分離議題

關注點議題：
將html、css、JavaScript 放在同一份文件中提高更高的維護性，但同時也可以使用Src import 的方式將JavaScript、CSS分別單獨開發再引入使用

[註2]<Style Scoped>使用

當<Style>標籤帶有scoped屬性時，這份CSS就只屬於當前的元件中使用。在element中開啟時會發現每一個標籤後方都被加入了獨一無二的名稱(using PostCSS)。

使用注意

1. 可以再同一個組件中使用全域、與當前範圍的CSS
   另一種使用全域樣式的方式使用偽類:global

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
/* using global styles rather created style */
:global(.red) {
  color: red;
}
</style>

2. 使用scoped的CSS父組件不會與其子組件的樣式互相影響，但子組件還是會受到父組件的切版設計影響樣式。
3. 深度選擇器（>>>）：但sass 不被正常解析，改用/deep/or::v-deep組合符號，也有相同作用。

<style scoped>
.a::v-deep .b { /* ... */ }
</style>

<style scoped>
.a /deep/ .b { /* ... */ }
</style>

4. 在scoped 中選擇class\ID 的使用方式會比只選擇 屬性的方式性能來的好
5. 動態生成的v-html不受scoped影響，但還是可以使用深度選擇的方式修改樣式
6. <slot /> 默認是不受作用域樣式影響，因為樣式應該是由父組件來的，所以在使用上應該為使用:slotted

<style scoped>
:slotted(div) {
  color: red;
}
</style>

CSS Modules 樣式寫法:

1. 定義CSS樣式

   <style module>
       .red {
           color: red;
       }
   </style>
   <!-- 自定義名稱使用 -->
   <style module="classes">
       .red {
           color: red;
       }
   </style>
   

   2. 使用方式($style):

    <template>
        <p :class="$style.red">This should be red</p>
    </template>
    <!-- 字定義名稱 -->
    <!-- 就無須使用$style來取得樣式 -->
    <template>
        <p :class="classes.red">red</p>
    </template>
   

   3. 使用compositionAPI:

       import { useCssModule } from 'vue'
   
       // inside setup() scope...
       // default, returns classes for <style module>
       useCssModule()
   
       // named, returns classes for <style module="classes">
       useCssModule('classes')
   

   4. v-bind() CSS

   <!-- <script setup>中使用，要使用{}括起來 -->
   <script setup>
       const theme = {
           color: 'red'
       }
   </script>
   
   <template>
       <p>hello</p>
   </template>
   
   <style scoped>
       p {
           color: v-bind('theme.color');
       }
   </style>
   

[註3] 熱加載的意思

當在編輯（模板、css時）.vue文件時該組件中的實例都將被換入，不需要重新加載頁面，就可以看到頁面上被編輯的變化。

• 在template中：已編輯組件的實例會重新渲染一次
• 在script中：編輯時有可能會重新加載，基於內部的lifecycle內容而定
• 在style中：有自己的熱加載方式<vue-style-loader>

兩種不同的API使用

optionAPI

使用data、methods和mounted等選項物件定義元件的邏輯。由選項定義的屬性暴露this內部函式上，該函式指向元件。

缺點：是code的數量較多
優點：低複雜的情境仍然好用，對於物件導向程式設計開發者友善

CompositionAPI

相較於將各項邏輯分開的optionAPI，CompositionAPI 將處理特定的邏輯放在一塊

優點：好管理大型複雜專案

setup()同時使用兩種API的方式，在現有的optionsAPI中撰寫新功能時使用CompositionAPI的方式合併使用

總結：

1. Vue 是基於MVVM的架構基礎來做資料與畫面的更新
2. 漸進式框架，是一個依照需求情境開發的概念，拿需要的即可
3. SFC文件檔案開發：
   1. 使用html\css\JavaScript做開發
   2. 關注點分離
   3. CSS scoped 使用區域樣式
   4. 使用熱加載，即時看到更新的內容
4. 兩種不同的API使用：
   1. 可以共用與分開使用
   2. optionAPI使用data\methods\mounted定義物件的邏輯，使用this指向元件
   3. compositionAPI將特定相同的邏輯放在一起處理，省下分開撰寫的閱讀困難，管理大型專案的優點