EP0 - Vue 是什麼毛？

Vue是一個前端框架，發音如View，幫助你有效率地開發任何複雜性的使用者介面
由前Google工程師 尤雨溪(Evan You) 邊工作邊開發出來的開源框架，好厲害！
還在耍廢嗎？一起來學習吧～ 期待有朝一日能應徵上遠端工作 www ~
以下內容都是取自官方Document 與 AI解釋～與自己小小心得
一起來看看官方文件 https://vuejs.org/

下面的範例是什麼？

// main.js 或 main.ts 取決於使用 Javascript or Typescript
import { createApp, ref } from 'vue'

createApp({
	setup () {
		return {
			count: ref(0)
		}
	}
}).mount('#app')

這段代碼的作用是創建一個 Vue 應用並將其掛載到 index.html 中帶有 id="app" 的元素上。

// App.vue
<div id="app">
	<button @click="count++">
		Count is: {{ count }}
	</button>
</div>

這段代碼定義了一個 Vue 組件，它包含一個按鈕和一個計數器。按鈕的點擊事件綁定到 count++，每次點擊按鈕時，計數器 count 會增加 1。

官方說有此範例有兩個特點先來了解一下！

Declarative Rendering (聲明式渲染)

⮕ 使用模板語法擴充了標準HTML？
⮕ 允許我們基於Javascript狀態以聲明式描述HTML輸出？
翻譯了官方敘述還是看不懂＠＠於是繼續用 AI 多拉A夢～

聲明式渲染的核心思想是，你可以使用模板語法來描述你想要在 HTML 中呈現的結果，而不是指示如何一步步地更新 DOM。在傳統的 JavaScript 開發中，你可能需要手動操作 DOM 來更新界面。例如，當數據改變時，你需要查找相應的 DOM 元素並手動更新它們的內容。這種方法叫做命令式編程（Imperative Programming）。

而在 Vue.js 中，你可以使用聲明式編程來描述 HTML 輸出。這樣做的好處是，當數據改變時，Vue 會自動處理 DOM 更新，保持界面和數據的一致性。

說明

1. 擴展 HTML：
2. • Vue 使用模板語法來擴展標準的 HTML。這些擴展允許你在 HTML 中使用一些特有的指令（如 v-if, v-for, v-bind 等）來綁定 JavaScript 狀態。
   • 例如，{{ count }} 是一個模板語法，表示將 count 的值顯示在這裡。
2. 基於 JavaScript 狀態描述 HTML 輸出：
3. • 你可以根據 JavaScript 的狀態來聲明應該顯示什麼樣的 HTML。
   • 當 JavaScript 狀態改變時，Vue 會自動更新 HTML 來反映這些變化。

Reactivity (響應式系統)

⮕ Vue 會自動追蹤 JavaScript 狀態變化，並在變化發生時有效地更新 DOM

響應式系統的核心思想是，Vue 可以自動跟蹤 JavaScript 狀態的變化，並在這些變化發生時高效地更新 DOM。

說明

1. 自動跟蹤狀態變化：
2. • Vue 會跟蹤你在應用中使用的所有響應式數據（如 data 中的狀態）。
   • 當這些數據發生變化時，Vue 會自動檢測到並觸發相應的 DOM 更新。
2. 高效地更新 DOM：
3. • Vue 使用一種高效的算法來比較新的 DOM 樹和舊的 DOM 樹，並僅更新需要改變的部分，從而優化性能。

好奇其他框架特色呢？

未來有好奇的部分都會突然插入～

說明

• 聲明式渲染：React、Angular 和 Vue 都使用聲明式渲染來描述 UI。這使得代碼更直觀、更易讀。
• 響應式系統：這些框架都有自己的響應式系統來管理狀態和更新 DOM。React 使用 Hooks 和虛擬 DOM，Angular 使用 RxJS 和變更檢測，Vue 使用其內建的響應式系統和虛擬 DOM。
• 實現方式：儘管理念相似，但具體實現方式和特性各有不同。

The Progressive Framework (漸進式框架)

發現翻譯官網資料都會理解不足，以下則是直接叫AI更白話解釋～

Vue.js 是一個功能強大且靈活的前端框架，適用於各種不同的開發場景。以下是對各種使用方式的詳細解釋：

1. 無需構建步驟增強靜態 HTML：
2. • 可以在現有的靜態 HTML 頁面中直接引入 Vue.js，而不需要使用任何構建工具。
   • 這種方式適合於小型項目或需要快速實現一些交互功能的場景。
   • 例如，直接在 HTML 文件中通過 <script> 標籤引入 Vue.js，然後使用 Vue 實現數據綁定和事件處理。
2. 嵌入為任意頁面的 Web 組件：
3. • Vue.js 支持 Web 組件標準，這使得你可以將 Vue 組件嵌入到任何網頁中，即使該頁面並不是用 Vue 開發的。
   • 這種方式適合於需要在現有應用中引入 Vue 功能的場景。
3. 單頁應用程序 (SPA)：
4. • 單頁應用程序是一種流行的開發模式，其中整個應用僅加載一次，然後根據用戶交互動態更新界面。
   • Vue.js 提供了豐富的工具和插件（如 Vue Router）來支持 SPA 的開發。
4. 全棧 / 服務器端渲染 (SSR)：
5. • 服務器端渲染使得 Vue 組件在服務器上渲染成 HTML，然後發送給客戶端，這有助於提高 SEO 和初始加載速度。
   • Vue.js 提供了 Nuxt.js 這樣的框架來簡化 SSR 開發。
5. Jamstack / 靜態網站生成 (SSG)：
6. • 靜態網站生成是一種將網站預渲染為靜態文件的技術，這些文件可以通過 CDN 高效地分發和加載。
   • Nuxt.js 也支持 SSG，使得使用 Vue.js 構建高性能的靜態網站變得簡單。
6. 針對桌面、移動端、WebGL 甚至終端：
7. • Vue.js 的靈活性使得它可以用於構建跨平台應用，如桌面應用（使用 Electron）、移動應用（使用 NativeScript 或 Capacitor）、WebGL 應用（例如遊戲或可視化工具）甚至是命令行工具。

說明

Vue.js 的設計目標是靈活性和可逐步採用性，使得它可以適應各種不同的開發需求。無論是簡單的靜態網站還是複雜的單頁應用，Vue.js 都能提供相應的支持，並且可以根據項目的需求逐步引入更多功能。

Single-File Components 單文件組件

俗稱SFC

Vue.js 推薦使用單文件組件（Single-File Component，SFC）來編寫組件，這種方式對開發者非常友好且便於管理。以下是 SFC 的詳細解釋：

1. 文件格式：
2. • SFC 文件的擴展名是 .vue，這些文件看起來像 HTML，但包含了組件的所有部分。
   • 每個 SFC 文件通常由三個主要部分組成：<template>、<script> 和 <style>。
2. 封裝邏輯、模板和樣式：
3. • 模板（HTML）：<template> 部分包含了組件的 HTML 模板，這是組件的視圖部分。
   • 邏輯（JavaScript）：<script> 部分包含了組件的邏輯，如數據、方法和生命周期鉤子。
   • 樣式（CSS）：<style> 部分包含了組件的樣式，可以使用標準的 CSS，也可以使用預處理器如 Sass 或 Less。

將上一個範例寫成SFC的樣子如下：

<script setup> 
import { ref } from 'vue' 
const count = ref(0) 
</script> 

<template> 
	<button @click="count++">Count is: {{ count }}</button> 
</template> 

<style scoped> 
button { 
	font-weight: bold; 
} 
</style>

1. 定義特性：
2. • 單文件組件是 Vue 的一個核心特性，允許開發者在一個文件中封裝組件的邏輯、模板和樣式，這使得開發過程更加簡潔和高效。
2. 推薦使用情況：
3. • 如果你的項目需要使用構建工具（如 Webpack 或 Vite）來進行打包和優化，那麼使用 SFC 是推薦的方式。
   • 建構工具能夠將 .vue 文件轉換為瀏覽器可以直接運行的 JavaScript 。
3. 構建工具設置：
4. • Vue CLI（命令行界面工具）和 Vite 等工具可以自動為你設置所有必要的構建工具，使得你不需要手動配置 Webpack 或其他構建工具。
   • 這大大降低了初學者和中小型項目開始使用 Vue 的門檻。

說明

• 單文件組件（SFC）是 Vue.js 的一個重要特性，推薦在需要構建設置的情況下使用。
• SFC 可以提高代碼的模塊化和可維護性，並且構建工具可以自動處理這些文件，使得開發過程更加簡單和高效。
• Vue CLI 和 Vite 等工具能夠自動配置必要的構建環境，開發者可以專注於編寫代碼而不是配置構建工具。

API Styles

Vue 組件可以使用兩種不同的 API 風格來編寫

Vue.js 提供了兩種主要的 API 風格來編寫組件：選項 API（Options API） 和 組合 API（Composition API）。下面是關於選項 API 的詳細解釋：

選項 API（Options API）

1. 定義方式：
2. • 選項 API 使用一個包含多個選項的對象來定義組件。這些選項包括：
   • • data：用於定義組件的數據狀態。data 是一個返回對象的方法，其中包含組件的所有響應式數據。
     • methods：用於定義組件的方法。這些方法可以在模板中使用，也可以用於處理用戶交互和其他邏輯。
     • mounted：是一個生命週期鉤子函數，在組件掛載到 DOM 之後被調用。你可以在這裡進行任何初始化操作，例如數據獲取或 DOM 操作。
2. 使用 this：
3. • 在選項 API 中，this 代表當前組件的實例。這意味著你可以通過 this 訪問定義在 data 中的數據、調用 methods 中的方法，以及訪問其他選項中定義的內容。

<script>
export default {
  // 由 data() 返回的屬性成為響應式狀態
  // 並會暴露在 `this` 上。
  data() {
    return {
      count: 0
    }
  },

  // 方法是改變狀態並觸發更新的函數。
  // 它們可以在模板中綁定為事件處理函數。
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命週期鉤子在組件的不同階段被調用。
  // 此函數會在組件掛載後被調用。
  mounted() {
    console.log(`初始計數為 ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">計數為: {{ count }}</button>
</template>

組合 API（Composition API） 是 Vue 3 引入的一種新的編寫組件的方式，它與傳統的選項 API（Options API）有所不同。以下是對組合 API 的詳細解釋：

組合 API（Composition API）

1. 定義方式：
2. • 在組合 API 中，我們使用 Vue 提供的 API 函數來定義組件的邏輯，而不是通過選項對象。這些 API 函數包括 ref、reactive、computed、watch 等，用於處理響應式狀態、計算屬性和監聽器。
2. <script setup>：
3. • 在單文件組件（SFC）中，組合 API 通常與 <script setup> 一起使用。這是一種編譯時提示，讓 Vue 進行一些轉換來簡化代碼。
   • 使用 <script setup>，你可以更輕鬆地導入所需的 API 函數，並且聲明的變數和函數可以直接在模板中使用，無需額外的樣板代碼。

<script setup>
import { ref, onMounted } from 'vue'

// 響應式狀態
const count = ref(0)

// 改變狀態並觸發更新的函數
function increment() {
  count.value++
}

// 生命週期鉤子
onMounted(() => {
  console.log(`初始計數為 ${count.value}.`)
})
</script>

<template>
  <button @click="increment">計數為: {{ count }}</button>
</template>

選擇哪一種 API 風格？

兩種 API 風格都能完全涵蓋常見的使用情境。它們是由相同的底層系統支持的不同接口。事實上，選項 API 是建立在組合 API 之上的！基本的概念和對 Vue 的知識在這兩種風格中是共享的。

選項 API（Options API）

1. 中心概念：

組件實例：選項 API 是圍繞組件實例進行的，這與面向對象編程（OOP）的類別模型更為契合。這對於有 OOP 背景的開發者來說，更容易理解。

1. 初學者友好：
2. • 選項 API 通過抽象響應式細節，使得代碼更容易理解和組織，對於初學者來說更加友好。它通過選項組（如 data、methods、mounted 等）來強制代碼的結構，簡化了開發過程。

組合 API（Composition API）

1. 中心概念：
2. • 函數範圍內的響應式狀態：組合 API 讓你可以在函數範圍內聲明響應式狀態變數，並將狀態從多個函數中組合起來，以處理更複雜的邏輯。
2. 靈活性：
3. • 組合 API 提供了更大的靈活性，能夠支持更複雜的邏輯組織和重用模式，但需要對 Vue 的響應式系統有更深入的理解。

說明

• 學習階段：
• • 選擇對你而言更容易理解的 API 風格。這樣可以更快上手 Vue 的核心概念，無論選擇哪種風格，大部分核心概念都是共享的。
• 生產使用：
• • 選項 API：如果不使用構建工具，或僅在簡單的情境下使用 Vue。
  • 組合 API + 單文件組件（SFC）：如果計劃構建複雜的應用程序，這種組合能夠提供更多的靈活性和強大的功能。
• 在學習過程中，可以根據自己的需求選擇最適合的 API 風格，並且可以在兩種風格之間切換。
• 選擇適合的 API 風格可以提高開發效率和代碼的可維護性。

雖然還是很多名詞不懂～一直用AI再解釋下去就不用睡覺了www