Vue.js

Vue.js

原作者	尤雨溪
開發者	尤雨溪同核心團隊
初始版本	2014年2月 (2014-02)
最新發布	3.4.31 / 2024年6月28號 (2024-06-28)
程式語言	TypeScript
平台	Web platform
檔案大細	33.9 KB min+gzip
軟件類別	JavaScript函式庫
許可協議	MIT授權條款
庫	github.com/vuejs/core

Vue.js（通常簡稱為Vue；讀作「view」）係一個開源嘅模型-視圖-視圖模型前端JavaScript框架，用嚟構建用戶界面同單頁應用程式。 佢由尤雨溪創建，並由佢同核心團隊嘅其他活躍成員維護。

概述

Vue.js嘅特色係採用漸進式架構，重點放喺聲明式渲染同組件組合。核心庫只專注喺視圖層。 複雜應用所需嘅進階功能，例如路由、狀態管理同構建工具，都係透過官方維護嘅支援庫同套件提供。

Vue.js允許使用HTML屬性擴展HTML，呢啲屬性叫做指令。 指令為HTML應用程式提供功能，可以係內置或者用戶自定義嘅。

歷史

Vue係尤雨溪喺Google工作期間使用AngularJS做幾個項目之後創建嘅。佢後來總結咗自己嘅思路：「我諗，如果我可以將我真係鍾意嘅Angular部分抽出嚟，整一啲真係輕量嘅嘢，會點呢？」 項目嘅第一個源代碼提交日期係2013年7月，Vue喺隔年2月首次公開宣布。

版本名稱通常源自漫畫同動畫。

版本

版本	發布日期	標題	LTS結束日期	終止支援日期
3.4	000000002023-12-28-00002023年12月28號	灌籃高手
3.3	000000002023-05-11-00002023年5月11號	浪客劍心
3.2	000000002021-08-05-00002021年8月5號	五等分的新娘
3.1	000000002021-06-07-00002021年6月7號	冥王
3.0	000000002020-09-18-00002020年9月18號	海賊王
2.7	000000002022-07-01-00002022年7月1號	火影忍者	000000002023-12-31-00002023年12月31號	000000002023-12-31-00002023年12月31號
2.6	000000002019-02-04-00002019年2月4號	超時空要塞	000000002022-03-18-00002022年3月18號	000000002023-09-18-00002023年9月18號
2.5	000000002017-10-13-00002017年10月13號	E班
2.4	000000002017-07-13-00002017年7月13號	斬服少女
2.3	000000002017-04-27-00002017年4月27號	JoJo嘅奇妙冒險
2.2	000000002017-02-26-00002017年2月26號	頭文字D
2.1	000000002016-11-22-00002016年11月22號	獵人
2.0	000000002016-09-30-00002016年9月30號	攻殼機動隊
1.0	000000002015-10-27-00002015年10月27號	新世紀福音戰士
0.12	000000002015-06-12-00002015年6月12號	龍珠
0.11	000000002014-11-07-00002014年11月7號	星際牛仔
0.10	000000002014-03-23-00002014年3月23號	銀翼殺手
0.9	000000002014-02-25-00002014年2月25號	動畫矩陣
0.8	000000002014-01-27-00002014年1月27號	唔適用	首次公開宣布嘅版本
0.7	000000002013-12-24-00002013年12月24號	唔適用
0.6	000000002013-12-08-00002013年12月8號	VueJS

當發布新嘅主要版本（即v3.y.z）時，上一個次要版本（即2.x.y）會成為LTS版本，維持18個月（修正錯誤同安全漏洞），之後再維持18個月嘅維護模式（只修復安全漏洞）。

主要應用與案例

Vue.js 喺唔同領域都有廣泛應用，以下係一啲知名使用 Vue.js 嘅應用或者網站，說明其實際應用情況同效果：

• Grammarly – 一個用於語法檢查同寫作輔助嘅工具，Grammarly 使用 Vue.js 來構建其用戶界面，提供即時嘅語法建議同改進建議。

• Alibaba – 中國最大嘅電商平台之一，Alibaba 喺其內部項目同部分前端系統中使用 Vue.js，提升咗開發效率同用戶體驗。

• GitLab – 一個為程式碼倉庫提供版本控制嘅平台，GitLab 使用 Vue.js 來實現其部分前端功能，提高咗系統嘅互動性同用戶界面嘅流暢度。

• Xiaomi – 中國知名嘅電子產品公司，Xiaomi 喺其部分網頁應用中使用 Vue.js，提供咗快速同靈活嘅用戶體驗。

• Laravel Spark – 一個為 Laravel 框架提供 SaaS 應用快速啟動工具，Spark 使用 Vue.js 作為其前端框架，令開發者可以更快構建複雜嘅應用。

呢啲應用展示咗 Vue.js 喺實際項目中嘅靈活性同高效性，亦反映出 Vue.js 喺大型項目同高流量網站中嘅穩定表現。

特性

組件

Vue組件擴展咗基本嘅HTML元素，用嚟封裝可重用嘅代碼。簡單嚟講，組件就係帶有預定義選項嘅Vue實例。 下面呢段代碼係一個Vue組件嘅例子。呢個組件顯示一個按鈕，並打印出按鈕被點擊嘅次數：

<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">撳咗 {{ count }} 次</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count嘅值由${oldValue}改為${newValue}。`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

模板

Vue使用以HTML為基礎嘅模板語法，允許將渲染嘅DOM綁定到底層Vue實例嘅數據。所有Vue模板都係有效嘅HTML，可以畀符合規範嘅瀏覽器同HTML解析器解析。Vue將模板編譯成虛擬DOM渲染函數。虛擬文檔對象模型（或者叫「DOM」）允許Vue喺更新瀏覽器之前，喺佢嘅記憶體中渲染組件。結合反應系統，Vue可以計算出需要重新渲染嘅最少組件數量，並喺應用狀態改變時應用最少嘅DOM操作。 Vue用戶可以使用模板語法，或者揀用hyperscript直接寫渲染函數，可以通過函數調用或者用JSX。 渲染函數允許應用程序由軟件組件構建。

Reactivity

Vue 有一個使用普通 JavaScript 物件同優化重渲染嘅反應系統。每個組件喺渲染嘅時候會追蹤其反應性依賴，所以系統可以準確知道幾時重渲染，同埋邊啲組件要重渲染。

Transitions

Vue 提供多種方法去應用過渡效果，當項目插入、更新或者喺 DOM 中移除嘅時候。呢啲工具包括：

• 自動應用 CSS 過渡同動畫嘅 class
• 集成第三方 CSS 動畫庫，例如 Animate.css
• 用 JavaScript 喺過渡鉤子期間直接操作 DOM
• 集成第三方 JavaScript 動畫庫，例如 Velocity.js

當一個包裹喺過渡組件嘅元素被插入或者移除時，會發生以下情況：

1. Vue 會自動檢測目標元素有冇應用 CSS 過渡或者動畫。如果有，CSS 過渡類將會喺適當嘅時間點被添加或者移除。
2. 如果過渡組件提供咗 JavaScript 鉤子，呢啲鉤子會喺適當嘅時間點被調用。
3. 如果冇檢測到 CSS 過渡/動畫同冇提供 JavaScript 鉤子，插入同/或者移除嘅 DOM 操作將會喺下一幀立即執行。

Routing

single-page application (SPA) 嘅傳統劣勢係冇辦法分享指向特定網頁內 "子" 頁面嘅連結。因為 SPA 只向用戶提供一個基於 URL 嘅伺服器響應（通常係提供 index.html 或 index.vue），所以通常好難或者唔可能書籤某啲畫面或者分享連結去特定部分。為咗解決呢個問題，好多客戶端路由器用 "hashbang" (#!) 分隔其動態 URL，例如 page.com/#!/。然而，隨住 HTML5 嘅普及，大多數現代瀏覽器支持無 hashbang 嘅路由。

Vue 提供咗一個接口，根據當前嘅 URL 路徑嚟改變頁面上顯示嘅內容——無論佢係點改變（無論係通過電郵連結、刷新還是在頁面連結）。此外，使用前端路由器允許喺某啲瀏覽器事件（例如點擊）發生時有意識咁過渡瀏覽器路徑。Vue 本身唔附帶前端 hash 路由，但開源嘅 "vue-router" 套件提供咗一個 API 嚟更新應用嘅 URL，支持返回按鈕（導航歷史記錄），並通過身份驗證 URL 參數支持電郵密碼重設或者電郵驗證連結。佢支持將嵌套路由映射到嵌套組件，並提供細粒度嘅過渡控制。用 Vue，開發人員已經喺用小型構建塊組合應用嚟構建更大嘅組件。隨住 vue-router 嘅加入，組件只需映射到佢哋所屬嘅路由，父/根路由必須指示子組件應該喺邊度渲染。

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...
</script>

上面嘅代碼：

1. 設置一個前端路由喺 websitename.com/user/<id>。
2. 會喺 User 組件中渲染（定義喺 const User...）。
3. 允許 User 組件使用 $route 物件嘅 params 鍵嚟傳遞輸入 URL 嘅特定 id：$route.params.id。
4. 呢個模板（根據傳遞到路由嘅參數而變化）會渲染到 DOM 嘅 div#app 內嘅 <router-view></router-view> 中。
5. 最終生成嘅 HTML 對於輸入：websitename.com/user/1 嘅人嚟講會係：

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

生態系統

核心庫包括由核心團隊同貢獻者開發嘅工具同庫。

官方架生

Vite 標誌

• Devtools – 用嚟調試 Vue.js 應用嘅瀏覽器開發者工具擴展
• Vite – 快速開發 Vue.js 嘅標準工具
• Vue Loader – 一個 webpack loader，允許以單文件組件（SFC）格式書寫 Vue 組件

官方庫

• Vue Router – 官方路由器
• Vuex – 受 Flux 啟發嘅集中式狀態管理
• Vue Server Renderer – 伺服器端渲染
• Pinia – 新簡單狀態管理