這次，面的是廣州品高，面試官問(wèn)我的一道題，為什么Vue會(huì)比Jquery更受開(kāi)發(fā)者喜愛(ài)？煞筆如我，只回答了一些不痛不癢的答案。
先來(lái)看看我的答案：1.Vue支持?jǐn)?shù)據(jù)綁定，而Jquery沒(méi)有。2.Vue有中文文檔，所以vue比較受中文開(kāi)發(fā)者喜愛(ài)（回了這個(gè)答案估計(jì)就涼了）。3.Vue支持組件化，也就是模塊化，每個(gè)組件都可以單獨(dú)工作。
事后，當(dāng)然是需要補(bǔ)救知識(shí)盲區(qū)啦。首先百度答案，基本所有的推薦文章都是互相抄襲，不夠具體，還好還是有可取之處的。這些文章基本都說(shuō)原因是
1.jQuery是使用選擇器（$）選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴(lài)DOM元素的值。
2.Vue則是通過(guò)Vue對(duì)象將數(shù)據(jù)和View完全分離開(kāi)來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說(shuō)數(shù)據(jù)和View是分離的，他們通過(guò)Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的MVVM。
我個(gè)人覺(jué)得這些答案都挺水的，所以我嘗試去回答。
Vue其實(shí)優(yōu)點(diǎn)挺多的，我這里就說(shuō)我知道比較重要的幾點(diǎn)。
1.Vue比JQuery減少了 DOM 操作
在這里我先提出一個(gè)問(wèn)題，為什么要較少DOM操作？？？？
回答：當(dāng)DOM操作影響到布局的時(shí)候，瀏覽器的渲染引擎就要重新計(jì)算然后渲染，越多的DOM操作就會(huì)導(dǎo)致越多的計(jì)算，自然會(huì)影響頁(yè)面性能，所以DOM操作減少是最好的
那Vue又是怎么樣減少DOM操作的呢？
Vue通過(guò)虛擬DOM技術(shù)減少DOM操作。什么是虛擬DOM？使用js對(duì)象模擬DOM，在操作過(guò)程中不會(huì)直接操作DOM，等待虛擬DOM操作完成，僅僅比較開(kāi)始和結(jié)束狀態(tài)虛擬DOM有哪些變換，最終根據(jù)結(jié)束狀態(tài)虛擬DOM去操作DOM。至于虛擬DOM怎么比較則是采用diff算法，具體算法我也不會(huì)。不過(guò)diff算法里有一個(gè)很好的措施來(lái)減少DOM操作。
下列是diff的處理措施：
（引用于：https://blog.csdn.net/m6i37jk/article/details/78140159）
（一）、優(yōu)先處理特殊場(chǎng)景
（1）、頭部的同類(lèi)型節(jié)點(diǎn)、尾部的同類(lèi)型節(jié)點(diǎn)
這類(lèi)節(jié)點(diǎn)更新前后位置沒(méi)有發(fā)生變化，所以不用移動(dòng)它們對(duì)應(yīng)的DOM
（2）、頭尾/尾頭的同類(lèi)型節(jié)點(diǎn)
這類(lèi)節(jié)點(diǎn)位置很明確，不需要再花心思查找，直接移動(dòng)DOM就好
（二）、“原地復(fù)用”
“原地復(fù)用”是指Vue會(huì)盡可能復(fù)用DOM，盡可能不發(fā)生DOM的移動(dòng)。Vue在判斷更新前后指針是否指向同一個(gè)節(jié)點(diǎn)，其實(shí)不要求它們真實(shí)引用同一個(gè)DOM節(jié)點(diǎn)，實(shí)際上它僅判斷指向的是否是同類(lèi)節(jié)點(diǎn)，如果是同類(lèi)節(jié)點(diǎn)，那么Vue會(huì)直接復(fù)用DOM，例如通過(guò)對(duì)換文本內(nèi)容的方式，這樣的好處是不需要移動(dòng)DOM。
2.Vue支持雙向數(shù)據(jù)綁定
數(shù)據(jù)綁定有單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定。
什么是單向數(shù)據(jù)綁定？
單向數(shù)據(jù)綁定即一方面只受另一方面影響，卻無(wú)法影響另一方面。前端常說(shuō)的單向數(shù)據(jù)綁定一般都指數(shù)據(jù)影響頁(yè)面，而頁(yè)面不影響數(shù)據(jù)。
什么是雙向數(shù)據(jù)綁定？
雙向的意思即兩個(gè)方面相互影響，前端來(lái)說(shuō)，即數(shù)據(jù)影響頁(yè)面，頁(yè)面同時(shí)影響數(shù)據(jù)。例如，在 MVVM 框架中，View(視圖) 和 Model(數(shù)據(jù)) 是不可以直接通訊的，在它們之間存在著 ViewModel 這個(gè)中間介充當(dāng)著觀察者的角色。當(dāng)用戶操作 View(視圖)，ViewModel 感知到變化，然后通知 Model 發(fā)生相應(yīng)改變；反之當(dāng) Model(數(shù)據(jù)) 發(fā)生改變，ViewModel 也能感知到變化，使 View 作出相應(yīng)更新。
舉個(gè)栗子
以上代碼將input的value和頁(yè)面顯示雙向綁定在一起。其實(shí)v-model只是語(yǔ)法糖，雙向綁定其實(shí)就等于單向綁定+UI時(shí)間監(jiān)聽(tīng)，只不過(guò)Vue將過(guò)程采用黑箱封裝起來(lái)了。
那雙向綁定有什么好處？
好處就是方便，數(shù)據(jù)自動(dòng)更新。而缺點(diǎn)就是無(wú)法得知是哪里更改了數(shù)據(jù)。
3.Vue支持組件化
組件化的概念
Web 中的組件其實(shí)就是頁(yè)面組成的一部分，好比是電腦中的每一個(gè)元件（如硬盤(pán)、鍵盤(pán)、鼠標(biāo)），它是一個(gè)具有獨(dú)立的邏輯和功能或界面，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合，變成一個(gè)完整的應(yīng)用，頁(yè)面就是有一個(gè)個(gè)類(lèi)似這樣的部分組成，比如導(dǎo)航、列表、彈窗、下拉菜單等。頁(yè)面只不過(guò)是這些組件的容器，組件自由組合形成功能完善的界面，當(dāng)不需要某個(gè)組件，或者想要替換某個(gè)組件時(shí)，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行。
組件化的特性
高內(nèi)聚性，組建功能必須是完整的，如我要實(shí)現(xiàn)下拉菜單功能，那在下拉菜單這個(gè)組件中，就把下拉菜單所需要的所有功能全部實(shí)現(xiàn)。
低耦合度，通俗點(diǎn)說(shuō)，代碼獨(dú)立不會(huì)和項(xiàng)目中的其他代碼發(fā)生沖突。在實(shí)際工程中，我們經(jīng)常會(huì)涉及到團(tuán)隊(duì)協(xié)作，傳統(tǒng)按照業(yè)務(wù)線去編寫(xiě)代碼的方式，就很容易相互沖突，所以運(yùn)用組件化方式就可大大避免這種沖突的存在、
每一個(gè)組件都有子集清晰的職責(zé)，完整的功能，較低的耦合便于單元測(cè)試和重復(fù)利用。
組件化的優(yōu)點(diǎn)
1.提高開(kāi)發(fā)效率 2.方便重復(fù)使用 3.簡(jiǎn)化調(diào)試步驟 4.提升整個(gè)項(xiàng)目的可維護(hù)性 5.便于協(xié)同開(kāi)發(fā)
結(jié)語(yǔ)
由于缺乏經(jīng)驗(yàn)，還是吃了不少虧，希望有大神愿意指點(diǎn)一下。
