vue.js是什麼？它的優點有哪些？

• 2021 年 12 月 27 日
• 筆記
• VUE, 前端

Vue.js 是一套響應式的 JavaScript 開發庫。其他前端開發庫也有很多，比如 jQuery、ExtJS、Angular 等。

Vue.js 自問世以來所受關注度不斷提高，在現在的市場上，Vue.js 是非常流行的 JavaScript 技術開發框架之一。

Vue.js 是什麼？🔥

Vue.js作者：尤雨溪

尤雨溪是一位美籍華人，在上海復旦大學附中讀完高中後，在美國完成大學學業，本科畢業於 Colgate University，後在 Parsons 設計學院獲得 Design & Technology 藝術碩士學位。他是 Vue Technology LLC 創始人，曾經在 Google Creative Lab 就職，參與過多個項目的介面原型研發，後加入 Meteor，參與 Meteor 框架本身的維護和 Meteor Galaxy 平台的交互設計與前端開發。

2014 年 2 月，尤雨溪開源了一個前端開發庫 Vue.js。Vue.js 是構建 Web 介面的 JavaScript 庫，也是一個通過簡潔的 API 提供高效數據綁定和靈活組件的系統。

2016 年 9 月 3 日，在南京的 JSConf 上，尤雨溪正式宣布以技術顧問的身份加盟阿里巴巴 Weex 團隊，來做 Vue 和 Weex 的 JavaScript runtime 整合，目標是讓大家能用 Vue 的語法跨三端。

目前，尤雨溪全職投入 Vue.js 的開發與維護，立志將 Vue.js 打造成與 Angular/React 平起平坐的世界頂級框架。

Vue.js 核心理念：

Vue.js（讀音/vju：/，發音類似於view）是一套構建用戶介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。

Vue 的核心庫只關注視圖層，並且非常容易學習，也非常容易與其他庫或已有項目整合。Vue 完全有能力驅動採用單文件組件和 Vue 生態系統支援的庫開發的複雜單頁應用。

Vue 還提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API，其目標是通過儘可能簡單的 API 實現響應式的數據綁定和可組合的視圖組件。

我們也可以說 Vue.js 是一套響應式系統（Reactivity System）。數據模型層（Model）只是普通 JavaScript 對象，如下圖所示，{ }代表一個 JavaScript 對象，修改它則更新相應的 HTML 片段（DOM），這些 HTML 片段也稱為「視圖（view）」。這會讓狀態管理變得非常簡單且直觀，可實現數據的雙向綁定，所以我們也稱之為響應式系統。

Vue.js 的特點🔥

Vue.js 是一個優秀的前端介面開發 JavaScript 庫，它之所以非常火，是因為有眾多突出的特點，其中主要的特點有以下幾個。

1) 輕量級的框架

Vue.js 能夠自動追蹤依賴的模板表達式和計算屬性，提供 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API，使讀者更加容易理解，能夠更快上手。

2) 雙向數據綁定

聲明式渲染是數據雙向綁定的主要體現，同樣也是 Vue.js 的核心，它允許採用簡潔的模板語法將數據聲明式渲染整合進 DOM。

3) 指令

Vue.js 與頁面進行交互，主要就是通過內置指令來完成的，指令的作用是當其表達式的值改變時相應地將某些行為應用到 DOM 上。

4) 組件化

組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的程式碼。

在 Vue 中，父子組件通過 props 傳遞通訊，從父向子單向傳遞。子組件與父組件通訊，通過觸發事件通知父組件改變數據。這樣就形成了一個基本的父子通訊模式。

在開發中組件和 HTML、JavaScript 等有非常緊密的關係時，可以根據實際的需要自定義組件，使開發變得更加便利，可大量減少程式碼編寫量。

組件還支援熱重載（hotreload）。當我們做了修改時，不會刷新頁面，只是對組件本身進行立刻重載，不會影響整個應用當前的狀態。CSS 也支援熱重載。

5) 客戶端路由

Vue-router 是 Vue.js 官方的路由插件，與 Vue.js 深度集成，用於構建單頁面應用。Vue 單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來，傳統的頁面是通過超鏈接實現頁面的切換和跳轉的。

6) 狀態管理

狀態管理實際就是一個單向的數據流，State 驅動 View 的渲染，而用戶對 View 進行操作產生 Action，使 State 產生變化，從而使 View 重新渲染，形成一個單獨的組件。

Vue.js 的優勢🔥