Vue.js——基于JavaScript的MVVC前端框架
Vue.js是基于JavaScript的一套MVVC前端框架。在介紹Vue.js之前，先來(lái)了解一下Web前端技術(shù)的發(fā)展過(guò)程。
Web剛起步階段，只有可憐的HTML，瀏覽器請(qǐng)求某個(gè)URL時(shí)，Web服務(wù)器就把對(duì)應(yīng)的HTML文件返回給瀏覽器，瀏覽器做解析后展示給用戶。隨著時(shí)間的推移，為了能給不同用戶展示不同的頁(yè)面信息，慢慢發(fā)展出了基于服務(wù)器的可動(dòng)態(tài)生成HTML的語(yǔ)言，例如ASP、PHP、JSP等。
但是，當(dāng)瀏覽器接收到一個(gè)HTML后，如果要更新頁(yè)面的內(nèi)容，就只能重新向服務(wù)器請(qǐng)求獲取一份新的HTML文件，即刷新頁(yè)面。在2G的流量年代，這種體驗(yàn)很容易讓人崩潰，而且還浪費(fèi)流量。
1995年，Web進(jìn)入JavaScript階段，在瀏覽器中引入了JavaScript。JavaScript是一種腳本語(yǔ)言，瀏覽器中帶有JavaScript引擎，用于解析并執(zhí)行JavaScript代碼，然后就可以在客戶端操作HTML頁(yè)面中的DOM，這樣就解決了不刷新頁(yè)面的情況，動(dòng)態(tài)地改變用戶HTML頁(yè)面的內(nèi)容。再后來(lái)發(fā)現(xiàn)編寫原生的JavaScript代碼太煩瑣了，還需要記住各種晦澀難懂的API，最重要的是還需要考慮各種瀏覽器的兼容性，因此出現(xiàn)了jQuery，并很快占領(lǐng)了JavaScript世界，幾乎成為前端開發(fā)的標(biāo)配。
直到HTML5的出現(xiàn)，前端能夠?qū)崿F(xiàn)的交互功能越來(lái)越多，代碼也越來(lái)越復(fù)雜，從而出現(xiàn)了各種MVC框架，使得網(wǎng)站開發(fā)進(jìn)入SPA（Single Page Application，單頁(yè)應(yīng)用程序）時(shí)代。SPA是指只有一個(gè)Web頁(yè)面的應(yīng)用。單頁(yè)應(yīng)用程序是加載單個(gè)HTML頁(yè)面，并在用戶與程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。瀏覽器一開始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這個(gè)頁(yè)面上完成，由JavaScript來(lái)控制交互和頁(yè)面的局部刷新。
2015年6月，ECMAScript 6發(fā)布，其正式名稱為ECMAScript 2015。該版本增加了很多新的語(yǔ)法，從而拓展了JavaScript的開發(fā)潛力。在Vue.js項(xiàng)目開發(fā)中經(jīng)常會(huì)用ECMAScript 6語(yǔ)法。
MVC模式
MVC是Web開發(fā)中應(yīng)用非常廣泛的一種架構(gòu)模式，之后又演變成了MVVM模式。
MVC模式
隨著JavaScript的發(fā)展，漸漸顯現(xiàn)出各種不和諧：組織代碼混亂，業(yè)務(wù)與操作DOM雜合，所以引入了MVC模式。
在MVC模式中，M指模型(Model)，是后端傳遞的數(shù)據(jù)；V指視圖(View)，是用戶所看到的頁(yè)面；C指控制器(Controller)，是頁(yè)面業(yè)務(wù)邏輯。MVC模式示意圖如圖1所示。
圖1 MVC模式示意圖
使用MVC模式的目的是將Model和View的代碼分離，實(shí)現(xiàn)Web應(yīng)用系統(tǒng)的職能分工。MVC模式是單向通信的，也就是View和Model需要通過(guò)Controller來(lái)承上啟下。
MVVM模式
隨著網(wǎng)站前端開發(fā)技術(shù)的發(fā)展，又出現(xiàn)了MVVM模式。不少前端框架采用了MVVM模式，例如當(dāng)前比較流行的Angular和Vue.js。
MVVM是Model-View-ViewModel的簡(jiǎn)寫。其中MV和MVC模式中的意思一樣，VM指ViewModel，是視圖模型。
MVVM模式示意圖如圖2所示。
圖2 MVVM模式示意圖
(1)將模型轉(zhuǎn)化成視圖，將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成用戶所看到的頁(yè)面。
(2)將視圖轉(zhuǎn)化成模型，即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)。
在Vue.js框架中，這兩個(gè)方向都實(shí)現(xiàn)了，就是Vue.js中數(shù)據(jù)的雙向綁定。
ViewModel是MVVM模式的核心，是連接View和Model的橋梁。它有兩個(gè)方向：
Vue.js概述
Vue.js是一套構(gòu)建前端的MVVM框架，它集合了眾多優(yōu)秀主流框架設(shè)計(jì)的思想，輕量、數(shù)據(jù)驅(qū)動(dòng)（默認(rèn)單向數(shù)據(jù)綁定，但也支持雙向數(shù)據(jù)綁定）、學(xué)習(xí)成本低，且可與Webpack/Gulp構(gòu)建工具結(jié)合，以實(shí)現(xiàn)Web組件化開發(fā)、構(gòu)建和部署等。
Vue.jswww.yuanwze.cn本身就擁有一套較為成熟的生態(tài)系統(tǒng)：Vue+vue-router+Vuex+Webpack+Sass/Less，不僅可以滿足小的前端項(xiàng)目開發(fā)，也能完全勝任大型的前端應(yīng)用開發(fā)，包括單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用等。Vue.js可實(shí)現(xiàn)前端頁(yè)面和后端業(yè)務(wù)分離、快速開發(fā)、單元測(cè)試、構(gòu)建優(yōu)化、部署等。ERROR 404 - Not Found!
提到前端框架，當(dāng)下比較流行的有Vue.js、React.js和Angular.js。Vue.js以容易上手的API、不俗的性能、漸進(jìn)式的特性和活躍的社區(qū)從中脫穎而出。截至目前，Vue.js在GitHub上的star數(shù)已經(jīng)超過(guò)了其他兩個(gè)框架，成為最熱門的框架。
Vue.js的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue.js完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
Vue.js的目標(biāo)就是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)、數(shù)據(jù)綁定和組合的視圖組件，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。Vue.js被定義成一個(gè)用來(lái)開發(fā)Web界面的前端框架，是一個(gè)非常輕量級(jí)的工具。使用Vue.js可以讓W(xué)eb開發(fā)變得簡(jiǎn)單，同時(shí)也顛覆了傳統(tǒng)前端開發(fā)的模式。
Vue.js是漸進(jìn)式的JavaScript框架，如果已經(jīng)有一個(gè)現(xiàn)成的服務(wù)端應(yīng)用，可以將Vue.js作為該應(yīng)用的一部分嵌入其中，帶來(lái)更加豐富的交互體驗(yàn)。或者，如果希望將更多的業(yè)務(wù)邏輯放到前端來(lái)實(shí)現(xiàn)，那么Vue.js的核心庫(kù)及其生態(tài)系統(tǒng)也可以滿足用戶的各種需求。
和其他前端框架一樣，Vue.js允許將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS和JavaScript，如圖3所示，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方。
這種把網(wǎng)頁(yè)分割成可復(fù)用組件的方式就是框架“組件化”的思想。
圖3 組件化
Vue.js組件化的理念和React異曲同工—一切皆組件。Vue.js可以將任意封裝好的代碼注冊(cè)成組件，例如Vue.component('example', Example)，可以在模板中以標(biāo)簽的形式調(diào)用。
Example是一個(gè)對(duì)象，組件的參數(shù)配置經(jīng)常使用到的是template，它是組件將要渲染的HTML內(nèi)容。
例如，example組件的調(diào)用方式如下：
<body>
<hi>我是主頁(yè)</hi>
<!-- 在模板中調(diào)用example組件 -->s
<example></example>
<p>歡迎訪問(wèn)我們的網(wǎng)站</p>
</body>如果組件設(shè)計(jì)合理，在很大程度上可以減少重復(fù)開發(fā)，而且配合Vue.js的單文件組件(vue-loader)，可以將一個(gè)組件的CSS、HTML和JavaScript都寫在一個(gè)文件里，做到模塊化的開發(fā)。此外，Vue.js也可以與vue-router和vue-resource插件配合起來(lái)，以支持路由和異步請(qǐng)求，這樣就滿足了開發(fā)SPA的基本條件。
在Vue.js中，單文件組件是指一個(gè)后綴名為.vue的文件，它可以由各種各樣的組件組成，大至一個(gè)頁(yè)面組件，小至一個(gè)按鈕組件。在后面的章節(jié)將詳細(xì)介紹單文件組件的實(shí)現(xiàn)。
Vue.js的發(fā)展歷程
Vue.js正式發(fā)布于2014年2月，包含70多位開發(fā)人員的貢獻(xiàn)。從腳手架、構(gòu)建、組件化、插件化，到編輯器工具、瀏覽器插件等，基本涵蓋了從開發(fā)到測(cè)試等多個(gè)環(huán)節(jié)。
Vue.js的發(fā)展過(guò)程如下：
2013年12月24日，發(fā)布0.7.0版本。
2014年1月27日，發(fā)布0.8.0版本。
2014年2月25日，發(fā)布0.9.0版本。
2014年3月24日，發(fā)布0.10.0版本。
2015年10月27日，正式發(fā)布1.0.0版本。
2016年4月27日，發(fā)布2.0的Preview版本。
2017年第一個(gè)發(fā)布的Vue.js版本為v2.1.9，最后一個(gè)發(fā)布的Vue.js版本為v2.5.13。
2019年發(fā)布Vue.js的2.6.10版本，也是比較穩(wěn)定的版本。
2020年09月18日，Vue.js 3.x正式發(fā)布。
Vue.js 3.x的新變化
Vue.js 3.x并沒(méi)有延用Vue.js 2.x版本的代碼，而是從頭重寫了整個(gè)框架，代碼采用TypeScript進(jìn)行編寫，新版本的API全部采用普通函數(shù)，在編寫代碼時(shí)可以享受完整的性能推斷。
與Vue.js 2.x版本相比，Vue.js 3.x具有以下新變化。
1.重構(gòu)響應(yīng)式系統(tǒng)
Vue.js 2.x利用Object.defineProperty()方法偵查對(duì)象的屬性變化，該方法有一定的缺點(diǎn)：
(1)性能較差。
(2)在對(duì)象上新增屬性是無(wú)法被偵測(cè)的。
(3)改變數(shù)組的length屬性是無(wú)法被偵測(cè)的。
Vue.js 3.x重構(gòu)了響應(yīng)式系統(tǒng)，使用Proxy替換Object.defineProperty。Proxy被稱為代理，它的Proxy優(yōu)勢(shì)如下：
(1)性能更優(yōu)異。
(2)可直接監(jiān)聽數(shù)組類型的數(shù)據(jù)變化。
(3)監(jiān)聽的目標(biāo)為對(duì)象本身，不需要像Object.defineProperty一樣遍歷每個(gè)屬性，有一定的性能提升。
(4)Proxy可攔截apply、ownKeys、has等13種方法，而Object.defineProperty不行。
2.更好的性能
Vue.js 3.x重寫了虛擬DOM的實(shí)現(xiàn)，并優(yōu)化了編譯模板，提升了組件的初始化速度，更新的性能提升了1.3~2倍，服務(wù)器端渲染速度提升了2~3倍。
3.tree-shaking支持
Vue.js 3.x只打包真正需要的模塊，刪除了無(wú)用的模塊，從而減小了產(chǎn)品發(fā)布版本的大小。而在Vue.js 2.x中，很多用不到的模塊也會(huì)被打包進(jìn)來(lái)。
4.組合API
Vue.js 3.x中引入了基于函數(shù)的組合API。在引入新的API之前，Vue還有其他替代方案，它們提供了諸如Mixin、HOC（高階組件）、作用域插槽之類的組件之間的可復(fù)用性，但是所有方法都有自身的缺點(diǎn)，因此它們未被廣泛使用。
(1)一旦應(yīng)用程序包含一定數(shù)量的Mixins，就很難維護(hù)。開發(fā)人員需要訪問(wèn)每個(gè)Mixin，以查看數(shù)據(jù)來(lái)自哪個(gè)Mixin。
(2)HOC模式不適用于.vue單文件組件，因此在Vue開發(fā)人員中不被廣泛推薦或使用。
(3)作用域插槽的內(nèi)容會(huì)封裝到組件中，但是開發(fā)人員最終擁有許多不可復(fù)用的內(nèi)容，并在組件模板中放置了越來(lái)越多的插槽，導(dǎo)致數(shù)據(jù)來(lái)源不明確。
組合API的優(yōu)勢(shì)如下：
(1)由于API是基于函數(shù)的，因此可以有效地組織和編寫可重用的代碼。
(2)將共享邏輯分離為功能來(lái)提高代碼的可讀性。
(3)可以實(shí)現(xiàn)代碼分離。
(4)在Vue應(yīng)用程序中更好地使用TypeScript。
5.Teleport（傳送）
Teleport是一種能夠?qū)⒛０逡苿?dòng)到DOM中Vue應(yīng)用程序之外的其他位置的技術(shù)。像modals和toast等元素，如果嵌套在Vue的某個(gè)組件內(nèi)部，那么處理嵌套組件的定位、z-index樣式就會(huì)變得很困難。很多情況下，需要將它與Vue應(yīng)用的DOM完全剝離，這樣管理起來(lái)會(huì)容易很多，此時(shí)就需要用到Teleport。
6.Fragment（碎片化節(jié)點(diǎn)）
在Vue 2.x中，每個(gè)組件必須有一個(gè)唯一的根節(jié)點(diǎn)，所以，寫每個(gè)組件模板時(shí)都要套一個(gè)父元素。在Vue 3.x中，新增了標(biāo)簽元素<Fragment></Fragment>，從而不再限于模板中的單個(gè)根節(jié)點(diǎn)，組件可以擁有多個(gè)節(jié)點(diǎn)。這樣做可以減少標(biāo)簽層級(jí)，減小內(nèi)存占用。
7.更好的TypeScript支持
Vue.js 3.x是用TypeScript編寫的庫(kù)，可以享受自動(dòng)的類型定義提示。JavaScript和TypeScript中的API相同，從而無(wú)須擔(dān)心兼容性問(wèn)題。結(jié)合使用支持Vue.js 3.x的TypeScript插件，開發(fā)更加高效，還可以擁有類型檢查、自動(dòng)補(bǔ)全等功能。
疑難解惑
疑問(wèn)1：前端開發(fā)的技術(shù)體系是什么？
目前的前端技術(shù)已經(jīng)形成了一個(gè)大的技術(shù)體系。
(1)以GitHub為代表的代碼管理倉(cāng)庫(kù)。
(2)以NPM和Yarn為代表的包管理工具。
(3)ECMAScript 6、TypeScript及Babel構(gòu)成的腳本體系。
(4)HTML5、CSS 3及其相應(yīng)的處理技術(shù)。
(5)以React、Vue、Angular為代表的前端框架。
疑問(wèn)2：在Vue.js中怎么理解MVVM？
MVVM是Model-View-ViewModel的縮寫。Model代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。View代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來(lái)。
ViewModel監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步View和Model的對(duì)象，連接Model和View。
在MVVM架構(gòu)下，View和Model之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)的變化會(huì)同步到Model中，而Model數(shù)據(jù)的變化也會(huì)立即反映到View上。
ViewModel通過(guò)雙向數(shù)據(jù)綁定把View層和Model層連接起來(lái)，而View和Model之間的同步工作完全是自動(dòng)的，無(wú)須人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM，不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由MVVM來(lái)統(tǒng)一管理。
袁文澤博客 www.yuanwze.cn
