溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vuejs解決了哪些問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
vuejs解決了MVC模式中control層過重，有太多針對View層交互操作的問題。vue只關心視圖層，即把HTML中的DOM與其他的部分獨立開來劃分出一個層次，來去處理他；Vue不去關心DOM元素的復雜結構，而是考慮的是數據該如何儲存。
本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
一、目前整個前端技術棧的情況
Vue是一個前端技術，所以在學習Vue之前，我們先來了解一下整個前端技術棧的技術和層次：
1、Html5+Css3+Jquery
這是目前前端最基礎的技術棧，也就是我們要實現一個前端頁面，至少要掌握的基礎，Html和Css是前端頁面元素和樣式的基礎語言，而Jquery可以理解為使用JavaScript封裝起來的腳本函數庫，如果很精通JavaScript，使用Jquery自然很得心應手。
目前純粹使用這種組合技術的公司很少，一般都會配合第三方框架來實現，主要是為了趕工期哈哈哈。
2、Augular、Vue、React
這三個框架都有很好的性能，都支持數據綁定，組件等基本功能。這里所討論的框架都是基于組件的。一個組件得到一個輸入，并且在一些內部的行為/計算之后，它返回一個渲染的 UI 模板（一個登錄/注銷區或一個待辦事項列表項）作為輸出。React 和 Vue比較擅長處理組件，Angular提供了關于如何構建應用程序的強有力的約束，并且還提供了更多開箱即用的功能。一般Vue、React經常用于中小型，或一些大型項目，而Angular因為比較厚重,一般多用于大型項目。
目前大部分互聯網公司都會使用這三個框架中的其中一種，例如滴滴出行、餓了么、小米移動商城等使用的是Vue，阿里和知乎的評論功能使用的是React和React-native，廣發證券，中興軟創，海爾日日順等公司使用的是Angular 2（2016年統計）。
3、Node.js
Node.js是一項服務器技術。我們都知道客戶端提出服務請求，而服務器端負責處理請求并提供服務。而對于互聯網來說，在Node.js之前JavaScript是一項完全的客戶端技術，被用于瀏覽器中實現各種動畫，對DOM的操作等等。而后端，即服務端則是由PHP、Python、Ruby、Java等等語言來實現。Node.js的出現，使得前后端使用同一種語言，統一模型的夢想得以實現。
說白了，就是Node.js可以實現服務器的功能。目前大搜車的主app后臺、淘寶數據魔方等產品都使用了Node.js作為服務后臺。
有一個共識就是，當一個前端開發人員學會了Node.js之后，就可以稱自己為“全棧工程師”（前端+后臺一人搞定）了，哈哈。
PS：我自己會Java后臺，我又懂一部分前端，我是不是也可以叫自己“偽全棧”了（滑稽）？
4、混合app開發（Ionic、ReactNative等）
混合app開發即在原生的Android（安卓）、IOS（蘋果系統）智能手機系統的APP應用上，嵌入HTML等網頁技術，實現原生與HTML的混合。因為原生APP的開發需要花費大量的時間和開發成本，所以一般都采用混合開發的模式，來實現大的提高開發效率和開發成本，是APP目前的主流開發方式。當然也有一些純HTML5的移動應用，外面套了一個APP的殼子。
Ionic是基于Apache Cordova的混合移動應用開發方案 。其優勢在于可以用前端開發的標準技術：HTML、JavaScript 和 CSS 來開發移動應用。Ionic 也提供了豐富的組件來簡化移動應用開發。這些組件在不同的平臺上有類似原生組件的外觀。Ionic 也可以通過 Apache Cordova 與底層系統進行交互，調用電話簿和攝像頭等原生功能。
React Native實現了只使用JavaScript也能編寫原生移動應用的效果，它在設計原理上和React一致，通過聲明式的組件機制來搭建豐富多彩的用戶界面。使用React Native，可以編寫一次代碼并多次部署到Android和iOS操作系統。對于一些創業公司來說，這樣可以節省成本，并為程序員騰出時間完成其他重要任務。
以上就是目前整個前端技術棧的情況，這可以讓我們對整個前端生態有一個大致的了解，讓我們清楚即將學習的Vue技術在前端技術棧的定位。
二、Vue介紹及其解決的痛點
Vue是一個基于JavaScript的前端框架，是一個國產框架，作者是尤雨溪（著名漸進式 JavaScript 框架 vuejs.org 的創造者）。
Vue是一個單頁面框架，基于模塊化和組件化的開發模式，其特點就是簡單、靈活、高效，在國內的很多中小企業使用的特別多。
說了那么多大、空、虛的詞，可能大家還是不知道Vue到底是干啥的，這里我們就要先從Vue的兩個大特點說起，分別是“基于視圖層的框架”和“MVVM模式”。
1、MVC模式以及其缺陷
很多童鞋可能不知道“MVVM模式”是啥，但是提到“MVC模式”一般都是知道的，“MVC”設計模式就是model，view，control，即數據模型、視圖層、控制層，像Jquery就是這種模式：
我們可以理解為網頁上的一個個諸如p的DOM元素為“View視圖”，而改變DOM元素屬性或值的數據來源方（如Ajax從服務器獲取數據），可以理解為“model數據模型”，而使用諸如Jquery之類的腳本去實現頁面動態交互，通過事件機制來響應用戶的交互操作（例如用戶點擊按鈕之后彈出一個對話框，或修改了標簽中的值），即為control層。
而傳統的“MVC模式”有什么缺點呢？其實最大的缺點就是control層承擔了太多的針對View層的交互操作邏輯。例如找某個被嵌套了很多層的p元素的父級元素，使用Jquery時可能會出現“$ (’#xxx’).parent().parent().parent()”這種寫法，如果后期在中間層又多出了其它層的父級元素，這個代碼還要修改。相類似這種關聯和嵌套的DOM元素，會隨著頁面的復雜度提高而提高，到時候這些復雜元素的修改將會變得特別困難，甚至牽一發而動全身。
2、MVVM模式以及解決的問題
而Vue的最強大之處就在于解決了上面control層過重的問題。對于Vue而言，它只關心的是視圖層，即把HTML中的DOM與其他的部分獨立開來劃分出一個層次，來去處理他。Vue不去關心DOM元素的復雜結構，而是考慮的是數據該如何儲存。這一點正是利用了“MVVM模式”的設計理念。
在“MVVM模式”中，control層被替換為了“ViewModel”層：
ViewModel是干嘛的？它實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應View層顯示會自動改變。我們可以理解為我們只需要調整元素屬性，剩下的DOM操作由框架來幫我們搞。這不就解決了我們上面說的問題了？下面就說說Vue是怎么具體解決這些問題的。
3、Vue的優點
Vue有“聲明式、響應式的數據綁定”、“組件化的開發”和“Virtual DOM”三大優點：
（1）聲明式、響應式的數據綁定
使用傳統的JQuery或者原生的JavaScript操作一個DOM元素，需要先獲取該DOM元素對象，然后再對這個對象進行相應值的修改等操作。而Vue只需要先把要修改的值綁定到js對象（例如一個包含多個子元素的大模塊只需要分配一個js對象）上，然后修改這個js對象的值，此時Vue框架就會自動把DOM元素的值進行更新，我們只需要關心js對象值的修改，不需要關心DOM操作。
例如下面這個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js測試</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" value="" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>效果：
我們在input中輸入文字的時候，下面p標簽中的內容會同步出現。這里就是將p標簽中的值與js對象進行了綁定，這里的js對象是以id為app的整個p和其子元素作為一個整體組件來生成的。
這里，DOM元素跟隨js對象值的變化而變化叫做單向數據綁定，如果js對象的值也跟隨著DOM元素的值的變化而變化就叫做雙向數據綁定。
（2）組件化的開發
一個單頁的移動端的應用，往往會有很多個模塊需要編寫，而這些模塊又沒有什么明顯區分，如兩個p實現的是類似的效果，但是為了保證不同模塊下的邏輯是不同的，需要給每個功能相似單控制不容的元素起各種各樣的名字，來避免邏輯串模塊，有時候光input可能就要起好幾個名字，例如上面模塊是供應商收款信息，下面模塊是供應商付款信息，兩個input都要顯示供應商名字，但id又不能重讀，那只能起名類似supplierName1、supplierName2的名字。如果是多人共同開發一個單頁面，這樣的問題會更多。
Vue引入了組件化開發的思想，把一個單頁應用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只需要為該模塊的父級應用設置一個js對象（標簽為該父級元素的id），然后在組件標簽中寫好要傳入組件的參數（就像給函數傳入參數一樣，這個參數叫做組件的屬性），然后再分別寫好各種組件的實現就可以了。
例如剛剛說的供應商收付款的場景，通過Vue可以實現為：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js測試</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
供應商名稱：<input type="text" value="" v-model="message">
<br/>
付款信息：<p>{{ message }}付款1000元</p>
</div>
<hr>
<div id="app2">
供應商名稱：<input type="text" value="" v-model="message">
<br/>
收款信息：<p>{{ message }}收款2000元</p>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
data: {
message: '嘉龍化工廠'
}
})
var app2 = new Vue({
el: '#app2',
data: {
message: '千禧塑料廠'
}
})
</script>
</body>
</html>效果：
此時我們只需要修改每個父級js對象下的message即可，程序員A對app1以及下面的元素進行修改，不影響程序員B對app2下元素的修改，即使值的名字一樣，也只和綁定的父標簽有關系。這樣就實現了DOM元素與js對象值進行打包綁定。
（3）Virtual DOM
Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優化，由于這個DOM操作屬于預處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。此邏輯是為了解決瀏覽器不停渲染DOM樹導致的卡頓，也是解決DOM性能瓶頸的一種方式。
這個涉及到Vue的處理內核邏輯，這里先不做展開，了解即可。
以上是“vuejs解決了哪些問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
