盛世嫡妃凤轻小说,玄幻小说排行榜完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

vuejs解決了哪些問題

小編給大家分享一下vuejs解決了哪些問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為長興等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及長興網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、長興網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

vuejs解決了MVC模式中control層過重，有太多針對View層交互操作的問題。vue只關(guān)心視圖層，即把HTML中的DOM與其他的部分獨立開來劃分出一個層次，來去處理他；Vue不去關(guān)心DOM元素的復(fù)雜結(jié)構(gòu)，而是考慮的是數(shù)據(jù)該如何儲存。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

一、目前整個前端技術(shù)棧的情況

Vue是一個前端技術(shù)，所以在學(xué)習(xí)Vue之前，我們先來了解一下整個前端技術(shù)棧的技術(shù)和層次：

1、Html5+Css3+Jquery

這是目前前端最基礎(chǔ)的技術(shù)棧，也就是我們要實現(xiàn)一個前端頁面，至少要掌握的基礎(chǔ)，Html和Css是前端頁面元素和樣式的基礎(chǔ)語言，而Jquery可以理解為使用JavaScript封裝起來的腳本函數(shù)庫，如果很精通JavaScript，使用Jquery自然很得心應(yīng)手。
目前純粹使用這種組合技術(shù)的公司很少，一般都會配合第三方框架來實現(xiàn)，主要是為了趕工期哈哈哈。

2、Augular、Vue、React

這三個框架都有很好的性能，都支持?jǐn)?shù)據(jù)綁定，組件等基本功能。這里所討論的框架都是基于組件的。一個組件得到一個輸入，并且在一些內(nèi)部的行為/計算之后，它返回一個渲染的 UI 模板（一個登錄/注銷區(qū)或一個待辦事項列表項）作為輸出。React 和 Vue比較擅長處理組件，Angular提供了關(guān)于如何構(gòu)建應(yīng)用程序的強有力的約束，并且還提供了更多開箱即用的功能。一般Vue、React經(jīng)常用于中小型，或一些大型項目，而Angular因為比較厚重,一般多用于大型項目。

目前大部分互聯(lián)網(wǎng)公司都會使用這三個框架中的其中一種，例如滴滴出行、餓了么、小米移動商城等使用的是Vue，阿里和知乎的評論功能使用的是React和React-native，廣發(fā)證券，中興軟創(chuàng)，海爾日日順等公司使用的是Angular 2（2016年統(tǒng)計）。

3、Node.js

Node.js是一項服務(wù)器技術(shù)。我們都知道客戶端提出服務(wù)請求，而服務(wù)器端負(fù)責(zé)處理請求并提供服務(wù)。而對于互聯(lián)網(wǎng)來說，在Node.js之前JavaScript是一項完全的客戶端技術(shù)，被用于瀏覽器中實現(xiàn)各種動畫，對DOM的操作等等。而后端，即服務(wù)端則是由PHP、Python、Ruby、Java等等語言來實現(xiàn)。Node.js的出現(xiàn)，使得前后端使用同一種語言，統(tǒng)一模型的夢想得以實現(xiàn)。

說白了，就是Node.js可以實現(xiàn)服務(wù)器的功能。目前大搜車的主app后臺、淘寶數(shù)據(jù)魔方等產(chǎn)品都使用了Node.js作為服務(wù)后臺。
有一個共識就是，當(dāng)一個前端開發(fā)人員學(xué)會了Node.js之后，就可以稱自己為“全棧工程師”（前端+后臺一人搞定）了，哈哈。
PS：我自己會Java后臺，我又懂一部分前端，我是不是也可以叫自己“偽全?！绷耍ɑ?？

4、混合app開發(fā)（Ionic、ReactNative等）

混合app開發(fā)即在原生的Android（安卓）、IOS（蘋果系統(tǒng)）智能手機系統(tǒng)的APP應(yīng)用上，嵌入HTML等網(wǎng)頁技術(shù)，實現(xiàn)原生與HTML的混合。因為原生APP的開發(fā)需要花費大量的時間和開發(fā)成本，所以一般都采用混合開發(fā)的模式，來實現(xiàn)大的提高開發(fā)效率和開發(fā)成本，是APP目前的主流開發(fā)方式。當(dāng)然也有一些純HTML5的移動應(yīng)用，外面套了一個APP的殼子。

Ionic是基于Apache Cordova的混合移動應(yīng)用開發(fā)方案。其優(yōu)勢在于可以用前端開發(fā)的標(biāo)準(zhǔn)技術(shù)：HTML、JavaScript 和 CSS 來開發(fā)移動應(yīng)用。Ionic 也提供了豐富的組件來簡化移動應(yīng)用開發(fā)。這些組件在不同的平臺上有類似原生組件的外觀。Ionic 也可以通過 Apache Cordova 與底層系統(tǒng)進(jìn)行交互，調(diào)用電話簿和攝像頭等原生功能。

React Native實現(xiàn)了只使用JavaScript也能編寫原生移動應(yīng)用的效果，它在設(shè)計原理上和React一致，通過聲明式的組件機制來搭建豐富多彩的用戶界面。使用React Native，可以編寫一次代碼并多次部署到Android和iOS操作系統(tǒng)。對于一些創(chuàng)業(yè)公司來說，這樣可以節(jié)省成本，并為程序員騰出時間完成其他重要任務(wù)。

以上就是目前整個前端技術(shù)棧的情況，這可以讓我們對整個前端生態(tài)有一個大致的了解，讓我們清楚即將學(xué)習(xí)的Vue技術(shù)在前端技術(shù)棧的定位。

二、Vue介紹及其解決的痛點

Vue是一個基于JavaScript的前端框架，是一個國產(chǎn)框架，作者是尤雨溪（著名漸進(jìn)式 JavaScript 框架 vuejs.org 的創(chuàng)造者）。
Vue是一個單頁面框架，基于模塊化和組件化的開發(fā)模式，其特點就是簡單、靈活、高效，在國內(nèi)的很多中小企業(yè)使用的特別多。

說了那么多大、空、虛的詞，可能大家還是不知道Vue到底是干啥的，這里我們就要先從Vue的兩個大特點說起，分別是“基于視圖層的框架”和“MVVM模式”。

1、MVC模式以及其缺陷

很多童鞋可能不知道“MVVM模式”是啥，但是提到“MVC模式”一般都是知道的，“MVC”設(shè)計模式就是model，view，control，即數(shù)據(jù)模型、視圖層、控制層，像Jquery就是這種模式：
vuejs解決了哪些問題

我們可以理解為網(wǎng)頁上的一個個諸如p的DOM元素為“View視圖”，而改變DOM元素屬性或值的數(shù)據(jù)來源方（如Ajax從服務(wù)器獲取數(shù)據(jù)），可以理解為“model數(shù)據(jù)模型”，而使用諸如Jquery之類的腳本去實現(xiàn)頁面動態(tài)交互，通過事件機制來響應(yīng)用戶的交互操作（例如用戶點擊按鈕之后彈出一個對話框，或修改了標(biāo)簽中的值），即為control層。

而傳統(tǒng)的“MVC模式”有什么缺點呢？其實最大的缺點就是control層承擔(dān)了太多的針對View層的交互操作邏輯。例如找某個被嵌套了很多層的p元素的父級元素，使用Jquery時可能會出現(xiàn)“$ (’#xxx’).parent().parent().parent()”這種寫法，如果后期在中間層又多出了其它層的父級元素，這個代碼還要修改。相類似這種關(guān)聯(lián)和嵌套的DOM元素，會隨著頁面的復(fù)雜度提高而提高，到時候這些復(fù)雜元素的修改將會變得特別困難，甚至牽一發(fā)而動全身。

2、MVVM模式以及解決的問題

而Vue的最強大之處就在于解決了上面control層過重的問題。對于Vue而言，它只關(guān)心的是視圖層，即把HTML中的DOM與其他的部分獨立開來劃分出一個層次，來去處理他。Vue不去關(guān)心DOM元素的復(fù)雜結(jié)構(gòu)，而是考慮的是數(shù)據(jù)該如何儲存。這一點正是利用了“MVVM模式”的設(shè)計理念。

在“MVVM模式”中，control層被替換為了“ViewModel”層：

vuejs解決了哪些問題

ViewModel是干嘛的？它實現(xiàn)了View和Model的自動同步，也就是當(dāng)Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應(yīng)View層顯示會自動改變。我們可以理解為我們只需要調(diào)整元素屬性，剩下的DOM操作由框架來幫我們搞。這不就解決了我們上面說的問題了？下面就說說Vue是怎么具體解決這些問題的。

3、Vue的優(yōu)點

Vue有“聲明式、響應(yīng)式的數(shù)據(jù)綁定”、“組件化的開發(fā)”和“Virtual DOM”三大優(yōu)點：

（1）聲明式、響應(yīng)式的數(shù)據(jù)綁定

使用傳統(tǒng)的JQuery或者原生的JavaScript操作一個DOM元素，需要先獲取該DOM元素對象，然后再對這個對象進(jìn)行相應(yīng)值的修改等操作。而Vue只需要先把要修改的值綁定到j(luò)s對象（例如一個包含多個子元素的大模塊只需要分配一個js對象）上，然后修改這個js對象的值，此時Vue框架就會自動把DOM元素的值進(jìn)行更新，我們只需要關(guān)心js對象值的修改，不需要關(guān)心DOM操作。

例如下面這個例子：




    
    vue.js測試
    


    
        
        
        {{ message }}

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

效果：

vuejs解決了哪些問題

我們在input中輸入文字的時候，下面p標(biāo)簽中的內(nèi)容會同步出現(xiàn)。這里就是將p標(biāo)簽中的值與js對象進(jìn)行了綁定，這里的js對象是以id為app的整個p和其子元素作為一個整體組件來生成的。

這里，DOM元素跟隨js對象值的變化而變化叫做單向數(shù)據(jù)綁定，如果js對象的值也跟隨著DOM元素的值的變化而變化就叫做雙向數(shù)據(jù)綁定。

（2）組件化的開發(fā)

一個單頁的移動端的應(yīng)用，往往會有很多個模塊需要編寫，而這些模塊又沒有什么明顯區(qū)分，如兩個p實現(xiàn)的是類似的效果，但是為了保證不同模塊下的邏輯是不同的，需要給每個功能相似單控制不容的元素起各種各樣的名字，來避免邏輯串模塊，有時候光input可能就要起好幾個名字，例如上面模塊是供應(yīng)商收款信息，下面模塊是供應(yīng)商付款信息，兩個input都要顯示供應(yīng)商名字，但id又不能重讀，那只能起名類似supplierName1、supplierName2的名字。如果是多人共同開發(fā)一個單頁面，這樣的問題會更多。

Vue引入了組件化開發(fā)的思想，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只需要為該模塊的父級應(yīng)用設(shè)置一個js對象（標(biāo)簽為該父級元素的id），然后在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實現(xiàn)就可以了。

例如剛剛說的供應(yīng)商收付款的場景，通過Vue可以實現(xiàn)為：




    
    vue.js測試
    


    
        供應(yīng)商名稱：
        

        付款信息：{{ message }}付款1000元

供應(yīng)商名稱：
收款信息：

{{ message }}收款2000元

var app1 = new Vue({ el: '#app1', data: { message: '嘉龍化工廠' } }) var app2 = new Vue({ el: '#app2', data: { message: '千禧塑料廠' } })

效果：

vuejs解決了哪些問題

此時我們只需要修改每個父級js對象下的message即可，程序員A對app1以及下面的元素進(jìn)行修改，不影響程序員B對app2下元素的修改，即使值的名字一樣，也只和綁定的父標(biāo)簽有關(guān)系。這樣就實現(xiàn)了DOM元素與js對象值進(jìn)行打包綁定。

（3）Virtual DOM

Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預(yù)先通過JavaScript進(jìn)行各種計算，把最終的DOM操作計算出來并優(yōu)化，由于這個DOM操作屬于預(yù)處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。此邏輯是為了解決瀏覽器不停渲染DOM樹導(dǎo)致的卡頓，也是解決DOM性能瓶頸的一種方式。
這個涉及到Vue的處理內(nèi)核邏輯，這里先不做展開，了解即可。

以上是“vuejs解決了哪些問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：vuejs解決了哪些問題
轉(zhuǎn)載注明：http://fisionsoft.com.cn/article/iisodi.html

新聞中心

其他資訊