Vue、 React 和 Angular 是當(dāng)前應(yīng)用最廣的三大前端框架，僅從 GitHub 趨勢來看，Vue 更是排在了第一位，目前已經(jīng)達(dá)到了 17 萬的 Star。

目前，不管是 BAT 大廠，還是創(chuàng)業(yè)公司，Vue 都有廣泛的應(yīng)用，對(duì)于任何一個(gè)前端工程師來說，Vue 都是一門非常值得我們學(xué)習(xí)的前端框架。

【資料圖】

但在國內(nèi)小程序成為移動(dòng)開發(fā)的破局者之后，Vue的名字又經(jīng)常和小程序關(guān)聯(lián)在了一起，下面我們就一同探究兩者之間的關(guān)系。

一、首先認(rèn)識(shí)下Vue

Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。【相關(guān)推薦：vuejs視頻教程、web前端開發(fā)】

上述是Vue官方網(wǎng)站給出解釋，對(duì)于大部分用戶讀起來還是非常抽象和晦澀難懂的，看完之后可能還是不懂這個(gè)框架到底是用來做什么的，什么是“漸進(jìn)式框架”？什么是“自底向上增量開發(fā)”？什么是“視圖層”？什么是“單文件組件”？什么是“復(fù)雜的單頁應(yīng)用？”第二段話里面“響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件”這又是個(gè)啥？

1.Vue.js到底是什么？

想必大家上網(wǎng)瀏覽新聞都是用APP或者網(wǎng)頁，Vue.js就是一個(gè)用于搭建類似網(wǎng)頁的表單項(xiàng)繁多、內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁版應(yīng)用。

2.什么是單頁應(yīng)用

單頁應(yīng)用一般指的就是一個(gè)頁面就是應(yīng)用，當(dāng)然也可以是一個(gè)子應(yīng)用，比如一個(gè)頁面就可以視為一個(gè)子應(yīng)用。單頁應(yīng)用程序中一般交互處理非常多，而且頁面中的內(nèi)容需要根據(jù)用戶的操作動(dòng)態(tài)變化。

3.什么叫視圖層

現(xiàn)在我們把一個(gè)網(wǎng)頁應(yīng)用抽象一下，那么HTML中的DOM其實(shí)就是視圖，一個(gè)網(wǎng)頁就是通過DOM的組合與嵌套，形成了最基本的視圖結(jié)構(gòu)，再通過CSS的修飾，在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來更加美觀。最后涉及到交互部分，就需要用到JavaScript來接受用戶的交互請(qǐng)求，并且通過事件機(jī)制來響應(yīng)用戶的交互操作，并且在事件的處理函數(shù)中進(jìn)行各種數(shù)據(jù)的修改，比如說修改某個(gè)DOM中的innerHTML或者innerText部分。我們把HTML中的DOM就可以與其他的部分獨(dú)立開來劃分出一個(gè)層次，這個(gè)層次就叫做視圖層。

4.響應(yīng)式的數(shù)據(jù)綁定

這里的響應(yīng)式不是@media 媒體查詢中的響應(yīng)式布局，而是指vue.js會(huì)自動(dòng)對(duì)頁面中某些數(shù)據(jù)的變化做出響應(yīng)。至于是如何響應(yīng)的，大家可以先把下面這段代碼隨便粘貼到一個(gè)擴(kuò)展名為html的文件然后用瀏覽器打開，隨便在文本框里面輸入一些文字，觀察一下頁面變化。

5.組件化開發(fā)

做單頁應(yīng)用，頁面交互和結(jié)構(gòu)十分復(fù)雜，一個(gè)頁面上就有許許多多的模塊需要編寫，而且往往一個(gè)模塊的代碼量和工作量就非常龐大，如果還按照原先的方法來開發(fā)，那么會(huì)累死人。而且遇到以后的產(chǎn)品需求變更，修改起來也非常麻煩，生怕動(dòng)了其中一個(gè)div之后，其他div跟著雪崩，整個(gè)頁面全部亂套，或者由于JavaScript的事件冒泡機(jī)制，導(dǎo)致修改一些內(nèi)層的DOM事件處理函數(shù)之后，出現(xiàn)各種莫名其妙的詭異BUG。

在面向?qū)ο缶幊讨?，我們可以使用面向?qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個(gè)大的業(yè)務(wù)模塊拆分成更多更小的幾個(gè)類。在面向過程編程中，我們也可以把一些大功能拆分成許多函數(shù)，然后分配給不同的人來開發(fā)。

在前端應(yīng)用，我們是否也可以像編程一樣把模塊封裝呢？這就引入了組件化開發(fā)的思想。

Vue.js通過組件，把一個(gè)單頁應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)單獨(dú)的組件（component）中，我們只要先在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽（占坑），并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個(gè)參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實(shí)現(xiàn)（填坑），然后整個(gè)應(yīng)用就算做完了。

二、Vue和小程序的關(guān)系

首先需要說明的一點(diǎn)Vue和小程序開發(fā)是沒有直接關(guān)系的。

但是受到Vue的影響，以及Vue眾多的開發(fā)者，不少組織將小程序二次開發(fā)，以類似Vue語法的形式進(jìn)行小程序開發(fā)（最后通過自己的工具轉(zhuǎn)成原生小程序的語法），比如美團(tuán)的mpVue（Vue.js in mini program）。好處在于降低了Vue開發(fā)者學(xué)習(xí)小程序開發(fā)的成本，以及優(yōu)化了很多小程序的不足點(diǎn)，例如小程序不能使用Npm，不能使用CSS預(yù)處理器，原生是callback語法等。

例如mpVue是一個(gè)使用 Vue.js 開發(fā)小程序的前端框架，框架基于Vue.js核心，Mpvue修改了Vue.js的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套Vue.js開發(fā)體驗(yàn)。使用Mpvue開發(fā)小程序，將在小程序技術(shù)體系的基礎(chǔ)上獲取到一些額外能力：

徹底的組件化開發(fā)能力：

提高代碼復(fù)用性完整的Vue.js開發(fā)體驗(yàn)方便的Vuex數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用快捷的webpack構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload支持使用 npm 外部依賴 使用Vue.js命令行工具 vue-cli快速初始化項(xiàng)目H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

如果需要深入學(xué)習(xí)了解使用mpVue開發(fā)小程序可以參考官方文檔：http://mpvue.com/mpvue/#_1

三、如何讓小程序發(fā)揮更大的價(jià)值

在理解如何基于Vue開發(fā)小程序后，那也可以順著了解如何更好的發(fā)揮小程序價(jià)值，這就不得不提到 Hybrid 模式漸漸開始流行， Native + 小程序 的架構(gòu)模式成為趨勢，它解決了傳統(tǒng)App帶來的迭代不敏捷、代碼量堆積、多平臺(tái)維護(hù)等問題，同時(shí)又有遠(yuǎn)超 H5 的體驗(yàn)。

這里要推薦到的是已經(jīng)在市場上比較成熟的小程序容器技術(shù)-FinClip，通過集成SDK便可讓自己的APP快速擁有小程序運(yùn)行能力。

此外，F(xiàn)inClip 的視圖層與邏輯層分離也帶來了許多好處：

1、方便多個(gè)小程序頁面之間的數(shù)據(jù)共享和交互。在小程序的生命周期中具有相同的上下文可以為具備原生應(yīng)用程序開發(fā)背景的開發(fā)人員提供熟悉的編碼體驗(yàn)；

2、Service和View的分離和并行實(shí)現(xiàn)可以防止JS執(zhí)行影響或減慢頁面渲染，這有助于提高渲染性能；

3、因?yàn)镴S在Service層執(zhí)行，所以JS里面操作的DOM將不會(huì)對(duì)View層產(chǎn)生影響，所以小程序不能操作DOM結(jié)構(gòu)的，這也使得小程序的性能比傳統(tǒng)的H5更好。

其中還有一點(diǎn)很值得推薦， 兼容微信小程序開發(fā)規(guī)范。

也就是說，原來通過Vue開發(fā)的微信小程序也可以在不改代碼的情況下，順帶手把這個(gè)小程序放在自己的 APP 里。同時(shí)，提供后臺(tái)管理頁面，可以統(tǒng)一管理自有和外部開發(fā)上架的小程序，以及對(duì)收集到的小程序數(shù)據(jù)進(jìn)行分析。

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

以上就是聊聊Vue開發(fā)小程序的技術(shù)原理的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：