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


2會員
67內容數
分享生活趣事~
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找