EP0 - Vue 是什麼毛?

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

Reactivity (響應式系統)

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

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

說明

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

好奇其他框架特色呢?

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

說明

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

The Progressive Framework (漸進式框架)

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

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

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

說明

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

Single-File Components 單文件組件

俗稱SFC

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

  1. 文件格式
    • SFC 文件的擴展名是 .vue,這些文件看起來像 HTML,但包含了組件的所有部分。
    • 每個 SFC 文件通常由三個主要部分組成:<template><script><style>
  2. 封裝邏輯、模板和樣式
    • 模板(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. 定義特性
    • 單文件組件是 Vue 的一個核心特性,允許開發者在一個文件中封裝組件的邏輯、模板和樣式,這使得開發過程更加簡潔和高效。
  2. 推薦使用情況
    • 如果你的項目需要使用構建工具(如 Webpack 或 Vite)來進行打包和優化,那麼使用 SFC 是推薦的方式。
    • 建構工具能夠將 .vue 文件轉換為瀏覽器可以直接運行的 JavaScript 。
  3. 構建工具設置
    • 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. 定義方式
    • 選項 API 使用一個包含多個選項的對象來定義組件。這些選項包括:
      • data:用於定義組件的數據狀態。data 是一個返回對象的方法,其中包含組件的所有響應式數據。
      • methods:用於定義組件的方法。這些方法可以在模板中使用,也可以用於處理用戶交互和其他邏輯。
      • mounted:是一個生命週期鉤子函數,在組件掛載到 DOM 之後被調用。你可以在這裡進行任何初始化操作,例如數據獲取或 DOM 操作。
  2. 使用 this
    • 在選項 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. 定義方式
    • 在組合 API 中,我們使用 Vue 提供的 API 函數來定義組件的邏輯,而不是通過選項對象。這些 API 函數包括 refreactivecomputedwatch 等,用於處理響應式狀態、計算屬性和監聽器。
  2. <script setup>
    • 在單文件組件(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. 初學者友好
    • 選項 API 通過抽象響應式細節,使得代碼更容易理解和組織,對於初學者來說更加友好。它通過選項組(如 datamethodsmounted 等)來強制代碼的結構,簡化了開發過程。

組合 API(Composition API)

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

說明

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


avatar-img
2會員
70內容數
分享生活趣事~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
前言 從零開始構建一個 DateTimePicker 可能看起來令人畏懼,但試想一下你將獲得的靈活性和控制力。在這個系列中,我們將逐步揭開構建過程的神秘面紗,讓您能夠創建一個完全符合需求的自定義 DateTimePicker。 本文章,屬於付費系列的文章,這篇文章,我會希望讀者可以得到的
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
前言 從零開始構建一個 DateTimePicker 可能看起來令人畏懼,但試想一下你將獲得的靈活性和控制力。在這個系列中,我們將逐步揭開構建過程的神秘面紗,讓您能夠創建一個完全符合需求的自定義 DateTimePicker。 本文章,屬於付費系列的文章,這篇文章,我會希望讀者可以得到的
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找