快捷導(dǎo)航

淺談Vue入門需掌握的知識

更新時間：2021年04月07日 17:23:45 作者：JeffreytheCoder

這篇文章主要介紹了淺談Vue入門需掌握的知識，感興趣的同學(xué)參考下

Vue作為一款目前最流行的前端框架之一，是許多前端開發(fā)工程師的不二選擇。最近我在前端崗位上也運用Vue實現(xiàn)了幾款產(chǎn)品，那么今天來分享一下Vue是什么，以及我對Vue的見解。

一、定義

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架

與傳統(tǒng)JS和JQuery框架不同，Vue的漸進(jìn)式框架表示開發(fā)者可以由簡單組件寫起，漸漸搭建出一個復(fù)雜的前端平臺。
形成Vue漸進(jìn)式框架的核心概念為：組件化，MVVM，響應(yīng)式，和生命周期，下面會一個個詳細(xì)介紹。

二、為什么要用Vue？

1. 組件化

Vue將組成一個頁面的HTML，CSS和JS合并到一個組件中，可以被其他組件或頁面引入而重復(fù)利用。通常每個.Vue文件作為一個組件導(dǎo)出，組件可以作為基礎(chǔ)組件（如按鈕）或一個頁面（如登錄頁面）。組件化很好的將一個龐大復(fù)雜的前端工程拆分為一個個組件，重復(fù)利用的性質(zhì)也大大提高了開發(fā)的效率。

2. MVVM 數(shù)據(jù)雙向綁定

MVVM模式（全稱為Model-View-ViewModel）為Vue實現(xiàn)數(shù)據(jù)雙向綁定。在MVVM中，View為視圖層，ViewModel為業(yè)務(wù)邏輯層，Model為數(shù)據(jù)層。

什么是數(shù)據(jù)雙向綁定呢？當(dāng)用戶使View變化時（如填寫表單），變化會自動同步到ViewModel處理相應(yīng)邏輯，并將變化更新到Model數(shù)據(jù)庫。反之，若服務(wù)端數(shù)據(jù)變化（如股價波動），變化會自動同步到ViewModel處理相應(yīng)邏輯，并將變化同步到View展現(xiàn)給用戶。

在用Vue之前，我完成HTML和JS之間的交互需要使用大量的DOM操作來實現(xiàn)動態(tài)加載。MVVM的數(shù)據(jù)雙向綁定減少了DOM操作，更高效地實現(xiàn)了視圖和數(shù)據(jù)的交互。同時，MVVM使界面、交互和數(shù)據(jù)層分離，便于設(shè)計人員負(fù)責(zé)設(shè)計界面，后端開發(fā)人員提供數(shù)據(jù)接口，而前端開發(fā)人員專注于業(yè)務(wù)交互邏輯的實現(xiàn)。

3. 響應(yīng)式虛擬DOM

對于DOM來說，當(dāng)HTML的一個元素（如div）需要響應(yīng)數(shù)據(jù)更改時，會刷新整個頁面，導(dǎo)致效率堪憂。對于虛擬DOM，瀏覽器會將HTML文件轉(zhuǎn)換為JS文件并復(fù)制一個額外使用（虛擬）。對于任何更改，虛擬DOM都將復(fù)制的JS與原始JS進(jìn)行比較，只重新加載更改的部分，局部修改到真實DOM上。

在Vue中，每個綁定data屬性的組件都有一個Watcher檢測data屬性的變化。一旦檢測到改變，則重新渲染該組件，這就是響應(yīng)式。

4. 生命周期

最后，每個Vue組件都有生命周期，過程為創(chuàng)建 -> 掛載 -> 更新 -> 銷毀。開發(fā)者可以通過鉤子函數(shù)（如mounted）在組件生命周期中的不同時刻進(jìn)行操作。下面是一張Vue生命周期的完整圖解。

三、Vue的優(yōu)缺點

講完Vue的幾個核心概念后，總結(jié)一下使用Vue框架給前端開發(fā)帶來的優(yōu)缺點：

優(yōu)點

1. 輕量級

Vue作為一款輕量級前端框架，大小只有18–21KB，工程搭建簡單，只需要幾行命令符。因為Vue使用的主體語言為JS，開發(fā)者可以靈活地將其他框架（如React和Angular）的項目遷移到Vue，具有很高的集成能力。Vue提供的router路由可以便捷地搭建一個多界面應(yīng)用。

2. 高性能

虛擬DOM和響應(yīng)式避免了不必要的全局重新渲染，提升了用戶體驗，使用戶操作更加流暢。

3. 好上手

與面向?qū)ο缶幊绦再|(zhì)類似，組件化更符合人類思維。打個比方，我們在設(shè)計網(wǎng)頁時，通常會把一個界面分成一塊一塊的、用于某功能的特定樣式模塊。Vue的組件化使前端開發(fā)更加容易理解，同時MVVM可以更便捷地實現(xiàn)交互，對新手十分友好。

4. 插件化

由于Vue框架的流行性，目前有許多基于Vue的npm擴(kuò)展包和開發(fā)工具（如Vuex）。Vue可以在一個文件下統(tǒng)一管理所有外部插件的全局使用。

5. 便于測試

組件化利于開發(fā)者對于單一組件進(jìn)行測試，很少發(fā)生在整個頁面下找不到是哪個地方報錯的情況。