維基百科

Vue.js

開源JavaScript用戶界面嘅函式庫

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

Vue.js
原作者尤雨溪
開發者尤雨溪同核心團隊[1]
初始版本2014年2月， 10年之前 (2014-02)[2]
最新發布3.4.31 [3] / 2024年6月28號， 4個月之前 (2024-06-28)
程式語言TypeScript
平台Web platform
檔案大細33.9 KB min+gzip[4]
軟件類別JavaScript函式庫
許可協議MIT許可證[5]
庫

概述

編輯

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

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

歷史

編輯

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

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

版本

編輯
版本 發布日期 標題 LTS結束日期 終止支援日期
3.4 2023年12月28號 灌籃高手[19]
3.3 2023年5月11號 浪客劍心[20]
3.2 2021年8月5號 五等分的新娘[21]
3.1 2021年6月7號 冥王[22]
3.0 2020年9月18號 海賊王[23]
2.7 2022年7月1號 火影忍者[24] 2023年12月31號 2023年12月31號
2.6 2019年2月4號 超時空要塞[25] 2022年3月18號 2023年9月18號
2.5 2017年10月13號 E班[26]
2.4 2017年7月13號 斬服少女[27]
2.3 2017年4月27號 JoJo嘅奇妙冒險[28]
2.2 2017年2月26號 頭文字D[29]
2.1 2016年11月22號 獵人[30]
2.0 2016年9月30號 攻殼機動隊[31]
1.0 2015年10月27號 新世紀福音戰士[32]
0.12 2015年6月12號 龍珠[33]
0.11 2014年11月7號 星際牛仔[34]
0.10 2014年3月23號 銀翼殺手[35]
0.9 2014年2月25號 動畫矩陣[36]
0.8 2014年1月27號 唔適用[37] 首次公開宣布嘅版本[17][18]
0.7 2013年12月24號 唔適用[38]
0.6 2013年12月8號 VueJS[39]

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

主要應用與案例

編輯

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實例。[41] 下面呢段代碼係一個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操作。 [42] Vue用戶可以使用模板語法，或者揀用hyperscript直接寫渲染函數，可以通過函數調用或者用JSX。[43] 渲染函數允許應用程序由軟件組件構建。[44]

Reactivity

編輯

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

Transitions

編輯

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

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

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

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

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 嘅加入，組件只需映射到佢哋所屬嘅路由，父/根路由必須指示子組件應該喺邊度渲染。[48] 

<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>

[49]

生態系統

編輯

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

官方架生

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

官方庫

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

參考

編輯
  1. ↑ https://vuejs.org/about/team
  2. ↑ 〈開源項目啟動嘅第一個禮拜〉。Evan You。原先內容歸檔喺February 5, 2019。喺March 11, 2017搵到。
  3. ↑ https://github.com/vuejs/core/blob/main/CHANGELOG.md
  4. ↑ "@vue/runtime-dom v3.2.45". Bundlephobia (英文). 原先內容歸檔喺January 29, 2023. 喺2023-01-29搵到.
  5. ↑ "vue/LICENSE". Vue.js. 喺April 17, 2017搵到 –透過GitHub.
  6. ↑ 6.0 6.1 6.2 〈介紹〉。Vuejs.org (英文)。原先內容歸檔喺February 10, 2022。喺January 3, 2020搵到。
  7. ↑ Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps (英文). O'Reilly Media. ISBN 978-1-4919-9721-5. 原先內容歸檔喺May 30, 2024. 喺August 9, 2019搵到.
  8. ↑ Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch (英文). Apress. ISBN 978-1-4842-3781-6. 原先內容歸檔喺May 30, 2024. 喺August 9, 2019搵到.
  9. ↑ Yerburgh, Edd (2019). Testing Vue.js Applications (英文). Manning Publications. ISBN 978-1-61729-524-9. 原先內容歸檔喺May 30, 2024. 喺August 9, 2019搵到.
  10. ↑ Freeman, Adam (2018). Pro Vue.js 2 (英文). Apress. ISBN 978-1-4842-3805-9. 原先內容歸檔喺May 30, 2024. 喺August 9, 2019搵到.
  11. ↑ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Working with Vue.js (英文). SitePoint. ISBN 978-1-4920-7144-0.
  12. ↑ [7][8][9][10][11][6]
  13. ↑ 〈認識團隊〉。Vuejs.org (英文)。原先內容歸檔喺February 7, 2022。喺September 23, 2019搵到。
  14. ↑ 〈Evan正喺創建Vue.js〉。Patreon (英文)。原先內容歸檔喺March 3, 2019。喺March 11, 2017搵到。
  15. ↑ 〈咩係Vue.js〉。W3Schools (英文)。原先內容歸檔喺January 22, 2020。喺January 21, 2020搵到。
  16. ↑ 〈尤雨溪〉。Between the Wires (英文)。November 3, 2016。原著喺June 3, 2017歸檔。喺August 26, 2017搵到。
  17. ↑ 17.0 17.1 〈Vue.js: 簡單易用嘅JavaScript MVVM〉。Hacker News。2014-02-03。原先內容歸檔喺January 29, 2023。喺2023-01-29搵到。
  18. ↑ 18.0 18.1 〈開源項目啟動嘅第一個禮拜〉。Evan You。2014-02-11。原先內容歸檔喺April 12, 2017。喺2023-01-29搵到。
  19. ↑ "宣布Vue 3.4". Vue.js. December 28, 2023. 原先內容歸檔喺March 24, 2024. 喺29 March 2024搵到.
  20. ↑ 〈v3.3.0 浪客劍心〉。Vue.js (英文)。May 11, 2023。原先內容歸檔喺December 13, 2023。喺2023-05-12搵到 –透過GitHub。
  21. ↑ 〈v3.2.0 五等分的新娘〉。Vue.js (英文)。August 5, 2021。原先內容歸檔喺August 10, 2021。喺August 10, 2021搵到 –透過GitHub。
  22. ↑ "v3.1.0 冥王". Vue.js (英文). June 7, 2021. 原先內容歸檔喺July 18, 2021. 喺July 18, 2021搵到 –透過GitHub.
  23. ↑ 〈v3.0.0 海賊王〉。Vue.js (英文)。September 18, 2020。原先內容歸檔喺September 19, 2020。喺September 23, 2020搵到 –透過GitHub。
  24. ↑ 〈v2.7.0 火影忍者〉。Vue.js (英文)。July 1, 2022。原先內容歸檔喺July 1, 2022。喺July 1, 2022搵到 –透過GitHub。
  25. ↑ 〈v2.6.0 超時空要塞〉。Vue.js (英文)。February 4, 2019。原先內容歸檔喺November 11, 2020。喺September 23, 2020搵到 –透過GitHub。
  26. ↑ "v2.5.0 E班". Vue.js (英文). October 13, 2017. 原先內容歸檔喺September 18, 2020. 喺September 23, 2020搵到 –透過GitHub.
  27. ↑ 〈v2.4.0 斬服少女〉。Vue.js (英文)。July 13, 2017。原先內容歸檔喺November 9, 2020。喺September 23, 2020搵到 –透過GitHub。
  28. ↑ 〈v2.3.0 JoJo嘅奇妙冒險〉。Vue.js (英文)。April 27, 2017。原先內容歸檔喺November 11, 2020。喺September 23, 2020搵到 –透過GitHub。
  29. ↑ "v2.2.0 頭文字D". Vue.js (英文). February 26, 2017. 原先內容歸檔喺April 13, 2021. 喺September 23, 2020搵到 –透過GitHub.
  30. ↑ "v2.1.0 獵人". Vue.js (英文). November 22, 2016. 原先內容歸檔喺November 8, 2020. 喺September 23, 2020搵到 –透過GitHub.
  31. ↑ 〈v2.0.0 攻殼機動隊〉。Vue.js (英文)。September 30, 2016。原先內容歸檔喺October 27, 2020。喺September 23, 2020搵到 –透過GitHub。
  32. ↑ 〈1.0.0 新世紀福音戰士〉。Vue.js (英文)。October 27, 2015。原先內容歸檔喺April 13, 2021。喺September 23, 2020搵到 –透過GitHub。
  33. ↑ "0.12.0: 龍珠". Vue.js (英文). June 12, 2015. 原先內容歸檔喺April 13, 2021. 喺September 23, 2020搵到 –透過GitHub.
  34. ↑ 〈v0.11.0: 星際牛仔〉。Vue.js (英文)。November 7, 2014。原先內容歸檔喺April 13, 2021。喺September 23, 2020搵到 –透過GitHub。
  35. ↑ 〈v0.10.0: 銀翼殺手〉。Vue.js (英文)。March 23, 2014。原先內容歸檔喺April 13, 2021。喺September 23, 2020搵到 –透過GitHub。
  36. ↑ 〈v0.9.0: 動畫矩陣〉。Vue.js (英文)。February 25, 2014。原先內容歸檔喺April 13, 2021。喺September 23, 2020搵到 –透過GitHub。
  37. ↑ "v0.8.0". Vue.js (英文). January 27, 2014. 原先內容歸檔喺April 13, 2021. 喺September 23, 2020搵到 –透過GitHub.
  38. ↑ "v0.7.0". Vue.js (英文). December 24, 2013. 原先內容歸檔喺April 13, 2021. 喺September 23, 2020搵到 –透過GitHub.
  39. ↑ "0.6.0: VueJS". Vue.js (英文). December 8, 2013. 原先內容歸檔喺April 13, 2021. 喺September 23, 2020搵到 –透過GitHub.
  40. ↑ 〈Vue路線圖〉。Vue.js (英文)。November 6, 2022。原先內容歸檔喺December 10, 2021。喺December 10, 2021搵到 –透過GitHub。
  41. ↑ 〈組件〉。Vuejs.org (英文)。原先內容歸檔喺February 10, 2022。喺March 11, 2017搵到。
  42. ↑ Jordan, John。〈Vue管理模板〉。喺16 July 2022搵到。
  43. ↑ 〈模板語法〉。Vuejs.org (英文)。原先內容歸檔喺February 10, 2022。喺March 11, 2017搵到。
  44. ↑ 〈Vue 2.0嚟喇！〉。September 30, 2016。{{cite web}}: CS1 maint: url-status (link)
  45. ↑ "Reactivity in Depth". Vuejs.org (英文). 原先內容歸檔喺February 10, 2022. 喺March 11, 2017搵到.
  46. ↑ "Transition Effects". Vuejs.org (英文). 原先內容歸檔喺December 13, 2023. 喺March 11, 2017搵到.
  47. ↑ "Transitioning State". Vuejs.org (英文). 原先內容歸檔喺February 10, 2022. 喺March 11, 2017搵到.
  48. ↑ "Routing". Vuejs.org (英文). 原先內容歸檔喺February 10, 2022. 喺March 11, 2017搵到.
  49. ↑ You, Evan. "Vue Nested Routing (2)". Vue Home Page (subpage). 原著喺May 8, 2017歸檔. 喺May 10, 2017搵到.
由「https://zh-yue.wikipedia.org/w/index.php?title=Vue.js&oldid=2202115」收