什么是vue？为什么用vue？
綜合：https://segmentfault.com/a/1190000015560315
https://blog.csdn.net/liang377122210/article/details/71545459
https://blog.csdn.net/xutongbao/article/details/77870989
這幾篇都寫得非常好
1.Vue.js是什么？
vue就是一個js庫，并且無依賴別的js庫，跟jquery差不多。vue的核心庫只關(guān)注視圖層，非常容易與其它庫或已有項目整合。Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。
2.Vue的MVVM設(shè)計模式是什么？導致了和jQuery的那些區(qū)別
如果你對前端有過了解的話一定知道MVVM和MVC這兩種設(shè)計模式，而且很有可能對mvp也有一些了解。
MVC即model，view，control，jQuery就是采用的這種設(shè)計模式，熟悉jQuery的同學恐怕早就對$()深通惡絕了吧。
MVVM即model，view，viewmodel，它是數(shù)據(jù)驅(qū)動模式，即所有的一切通過操作數(shù)據(jù)來進行，而盡量避免操作dom樹。
換句話說，我們不關(guān)注dom的結(jié)構(gòu)，而是考慮數(shù)據(jù)該如何儲存，用戶的操作在view通過viewmodel進行數(shù)據(jù)處理，分情況是否通過ajax與model層進行交互，再返回到view層，在這個過程中view和viewmodel的數(shù)據(jù)雙向綁定使得我們完全的擺脫了對dom的繁瑣操作，而是專心于對用戶的操作進行處理，避免了MVC中control層過厚的問題。
現(xiàn)在我們把一個網(wǎng)頁應(yīng)用抽象一下，那么HTML中的DOM其實就是視圖，一個網(wǎng)頁就是通過DOM的組合與嵌套，形成了最基本的視圖結(jié)構(gòu)，再通過CSS的修飾，在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來更加美觀。最后涉及到交互部分，就需要用到JavaScript來接受用戶的交互請求，并且通過事件機制來響應(yīng)用戶的交互操作，并且在事件的處理函數(shù)中進行各種數(shù)據(jù)的修改，比如說修改某個DOM中的innerHTML或者innerText部分。
我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次，這個層次就叫做視圖層。Vue 的核心庫只關(guān)注視圖層
我們?yōu)槭裁匆岩晥D層抽取出來并且單獨去關(guān)注它呢？
因為在像知乎這種頁面元素非常多，結(jié)構(gòu)很龐大的網(wǎng)頁中，數(shù)據(jù)和視圖如果全部混雜在一起，像傳統(tǒng)開發(fā)一樣全部混合在HTML中，那么要對它們進行處理會十分的費勁，并且如果其中有幾個結(jié)構(gòu)之間存在藕斷絲連的關(guān)系，那么會導致代碼上出現(xiàn)更大的問題，這什么問題呢？
你是否還記得你當初寫JQuery的時候，有寫過 $ (’#xxx’).parent().parent().parent()這種代碼呢？當你第一次寫的時候，你覺得頁面元素不多，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在注釋里面寫清楚這個元素的爸爸的爸爸的爸爸不就好了。但是萬一過幾天之后你的項目組長或者你的產(chǎn)品經(jīng)理突然對你做的網(wǎng)頁提出修改要求，這個修改要求將會影響頁面的結(jié)構(gòu)，也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變，那么$ (’#xxx’).parent().parent().parent()可能就會變成$(’#xxx’).parent().parent().parent().parent().parent()了。
這還不算什么，等以后產(chǎn)品迭代越來越快，修改越來越多，而且頁面中類似的關(guān)聯(lián)和嵌套DOM元素不止一個，那么修改起來將非常費勁。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的，可能到時候打開這個頁面，會變得越來越卡，而你卻無從下手。
當你在編寫項目的時候遇到了這種問題，你一定會抱怨，為什么世上會有HTML這種像盜夢空間一樣的需要無數(shù)div嵌套才能做出頁面的語言，為什么當初學JQuery看中的是它簡潔的DOM操作，現(xiàn)在卻一點也不覺得它有多簡潔，難道我學的是假的JQuery？為什么寫個代碼這么難，你想砸電腦，你想一鍵盤拍在產(chǎn)品狗的腦袋上，責怪他天天改需求才讓你原本花清香茶清味的代碼變得如此又臭又長。
這個時候如果你學過Vue.js，那么這些抱怨將不復存在。
3.Vue.js有那些優(yōu)點？
- 聲明式，響應(yīng)式的數(shù)據(jù)綁定
- 組件化的開發(fā)
- Virtual DOM
響應(yīng)式的數(shù)據(jù)綁定
1.jQuery首先要獲取到dom對象，然后對dom對象進行進行值的修改等操作
2.Vue是首先把值和js對象進行綁定，然后修改js對象的值，Vue框架就會自動把dom的值就行更新。
3.可以簡單的理解為Vue幫我們做了dom操作，我們以后用Vue就需要修改對象的值和做好元素和對
象的綁定，Vue這個框架就會自動幫我們做好dom的相關(guān)操作
4.這種dom元素跟隨JS對象值的變化而變化叫做單向數(shù)據(jù)綁定，如果JS對象的值也跟隨著dom元素的
值的變化而變化就叫做雙向數(shù)據(jù)綁定
是不是會發(fā)現(xiàn)一個很神奇的現(xiàn)象，文本框里面輸入的文字和后面的p標簽中的內(nèi)容一起變化？
換句話說，p標簽里面通過{{ message }}這個寫法與input標簽中的value綁定在了一起，其中變化，另外一個和它綁定的數(shù)據(jù)就跟著變化。
結(jié)合標題來說，就是vue.js會自動響應(yīng)數(shù)據(jù)的變化情況，并且根據(jù)用戶在代碼中預先寫好的綁定關(guān)系，對所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進行修改。而這種綁定關(guān)系，在圖上是以input 標簽的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。
組件化開發(fā)
作為整個VUE文檔中篇幅最大的部分，組件可是相當?shù)奶聿?#xff0c;要不是有組件這么易于復用，不易污染的特性，怕不是我都瘋了無數(shù)回。
打個比方，我們現(xiàn)在要做一個有一百個頁面的項目，其中有三十三個導航欄是A，六十七個導航欄是B，這其中三十三個A導航欄中有一個模塊與眾不同，可以分為A1,A2,A3,A4……
這個如果用jQuery解決的話，就得自己封裝模板插件，且要么寫(A,B,A1,A2，An).length個模板，要么模板套模板。
嘖嘖，累死個狗娘養(yǎng)的了。
這點上，VUE的模板就簡單的多，我們先算好要多少個組件，然后看看組件之間有沒有相互嵌套，把所有需要的地方都先挖上坑（寫好組件標簽），并且在組件標簽中寫好要傳入組件的參數(shù)，再分別寫好各種組件的實現(xiàn)，簡簡單單的就寫好了，即使是嵌套也只是組件標簽中套一個組件標簽，更簡單的改一個傳參能夠?qū)崿F(xiàn)。
還記得在傳統(tǒng)前端開發(fā)的時候，我們都是每個人做一個頁面，然后最后套入各種后端模版引擎，比如說PHP的Smarty或者Java的JSP等等。
但是現(xiàn)在我們做單頁應(yīng)用，頁面交互和結(jié)構(gòu)十分復雜，一個頁面上就有許許多多的模塊需要編寫，而且往往一個模塊的代碼量和工作量就非常龐大，如果還按照原先的方法來開發(fā)，那么會累死人。而且遇到以后的產(chǎn)品需求變更，修改起來也非常麻煩，生怕動了其中一個div之后，其他div跟著雪崩，整個頁面全部亂套，或者由于JavaScript的事件冒泡機制，導致修改一些內(nèi)層的DOM事件處理函數(shù)之后，出現(xiàn)各種莫名其妙的詭異BUG。
在面向?qū)ο缶幊讨?#xff0c;我們可以使用面向?qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個大的業(yè)務(wù)模塊拆分成更多更小的幾個類。在面向過程編程中，我們也可以把一些大功能拆分成許多函數(shù)，然后分配給不同的人來開發(fā)。
在前端應(yīng)用，我們是否也可以像編程一樣把模塊封裝呢？這就引入了組件化開發(fā)的思想。
Vue.js通過組件，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只要先在父級應(yīng)用中寫好各種組件標簽（占坑），并且在組件標簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實現(xiàn)（填坑），然后整個應(yīng)用就算做完了。
Virtual DOM
現(xiàn)在的網(wǎng)速越來越快了，很多人家里都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網(wǎng)頁才幾百K，而且瀏覽器本身還會緩存很多資源文件，那么幾十M的光纖為什么打開一個之前已經(jīng)打開過，已經(jīng)有緩存的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有性能瓶頸的，尤其是在傳統(tǒng)開發(fā)中，用JQuery或者原生的JavaScript DOM操作函數(shù)對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非?？D。
而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化，由于這個DOM操作屬于預處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。
對于vue.js的Virtual DOM，目前業(yè)界有著褒貶不一的評價。有人認為Vue.js作為一個輕量級框架，引入Virtual DOM會加大Vue.js本身的代碼尺寸，也會消耗更多CPU（手機上會更耗電）（注意：消耗更多的CPU并不意味著會更卡，因為JavaScript計算是后臺計算，他的計算量還不至于讓DOM操作變得卡頓），并且在操作單個DOM元素的時候，反而多了一道計算工序，會更慢。但也有人認為基本上會用Vue.js開發(fā)的都是頁面中內(nèi)容很多的元素，肯定操作的DOM量級普遍較大，平均一下還是比較劃算的。
總結(jié)
以上是生活随笔為你收集整理的什么是vue？为什么用vue？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BZOJ 2563 阿狸和桃子的游戏 贪
- 下一篇： 未辉