這次撵术，面的是廣州品高德绿，面試官問我的一道題，為什么Vue會(huì)比Jquery更受開發(fā)者喜愛蕴纳？煞筆如我个粱，只回答了一些不痛不癢的答案。
先來看看我的答案：1.Vue支持?jǐn)?shù)據(jù)綁定嫂冻，而Jquery沒有塞椎。2.Vue有中文文檔，所以vue比較受中文開發(fā)者喜愛（回了這個(gè)答案估計(jì)就涼了）服傍。3.Vue支持組件化骂铁，也就是模塊化拉庵，每個(gè)組件都可以單獨(dú)工作。
事后茫蛹，當(dāng)然是需要補(bǔ)救知識(shí)盲區(qū)啦伸辟。首先百度答案馍刮，基本所有的推薦文章都是互相抄襲，不夠具體静稻，還好還是有可取之處的振湾。這些文章基本都說原因是
1.jQuery是使用選擇器（$）選取DOM對(duì)象亡脸，對(duì)其進(jìn)行賦值、取值大州、事件綁定等操作垂谢，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的力试。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值排嫌。
2.Vue則是通過Vue對(duì)象將數(shù)據(jù)和View完全分離開來了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象躯畴，可以說數(shù)據(jù)和View是分離的蓬抄，他們通過Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定夯到。這就是傳說中的MVVM。
我個(gè)人覺得這些答案都挺水的阅爽，所以我嘗試去回答荐开。
Vue其實(shí)優(yōu)點(diǎn)挺多的，我這里就說我知道比較重要的幾點(diǎn)百侧。
1.Vue比JQuery減少了 DOM 操作
在這里我先提出一個(gè)問題佣渴，為什么要較少DOM操作初斑？？砂竖？鹃答？
回答：當(dāng)DOM操作影響到布局的時(shí)候，瀏覽器的渲染引擎就要重新計(jì)算然后渲染三圆，越多的DOM操作就會(huì)導(dǎo)致越多的計(jì)算舟肉，自然會(huì)影響頁面性能，所以DOM操作減少是最好的
那Vue又是怎么樣減少DOM操作的呢黄琼？
Vue通過虛擬DOM技術(shù)減少DOM操作整慎。什么是虛擬DOM？使用js對(duì)象模擬DOM撤师，在操作過程中不會(huì)直接操作DOM剃盾，等待虛擬DOM操作完成淤袜，僅僅比較開始和結(jié)束狀態(tài)虛擬DOM有哪些變換，最終根據(jù)結(jié)束狀態(tài)虛擬DOM去操作DOM积蔚。至于虛擬DOM怎么比較則是采用diff算法烦周，具體算法我也不會(huì)。不過diff算法里有一個(gè)很好的措施來減少DOM操作教翩。
下列是diff的處理措施：
（引用于：https://blog.csdn.net/m6i37jk/article/details/78140159）
（一）贪壳、優(yōu)先處理特殊場景
（1）闰靴、頭部的同類型節(jié)點(diǎn)钻注、尾部的同類型節(jié)點(diǎn)
這類節(jié)點(diǎn)更新前后位置沒有發(fā)生變化，所以不用移動(dòng)它們對(duì)應(yīng)的DOM
（2）杏死、頭尾/尾頭的同類型節(jié)點(diǎn)
這類節(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í)際上它僅判斷指向的是否是同類節(jié)點(diǎn)，如果是同類節(jié)點(diǎn)捺弦，那么Vue會(huì)直接復(fù)用DOM孝扛，例如通過對(duì)換文本內(nèi)容的方式，這樣的好處是不需要移動(dòng)DOM寞钥。
2.Vue支持雙向數(shù)據(jù)綁定
數(shù)據(jù)綁定有單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定陌选。
什么是單向數(shù)據(jù)綁定咨油？
單向數(shù)據(jù)綁定即一方面只受另一方面影響，卻無法影響另一方面赚爵。前端常說的單向數(shù)據(jù)綁定一般都指數(shù)據(jù)影響頁面法瑟，而頁面不影響數(shù)據(jù)。
什么是雙向數(shù)據(jù)綁定窝剖？
雙向的意思即兩個(gè)方面相互影響酥夭，前端來說脊奋，即數(shù)據(jù)影響頁面狂魔，頁面同時(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和頁面顯示雙向綁定在一起盯质。其實(shí)v-model只是語法糖袭蝗，雙向綁定其實(shí)就等于單向綁定+UI時(shí)間監(jiān)聽，只不過Vue將過程采用黑箱封裝起來了。
那雙向綁定有什么好處蔚袍？
好處就是方便配名，數(shù)據(jù)自動(dòng)更新渠脉。而缺點(diǎn)就是無法得知是哪里更改了數(shù)據(jù)芋膘。
3.Vue支持組件化
組件化的概念
Web 中的組件其實(shí)就是頁面組成的一部分霸饲，好比是電腦中的每一個(gè)元件（如硬盤、鍵盤习寸、鼠標(biāo)）傻工，它是一個(gè)具有獨(dú)立的邏輯和功能或界面，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合鸯匹，變成一個(gè)完整的應(yīng)用忽你，頁面就是有一個(gè)個(gè)類似這樣的部分組成臂容，比如導(dǎo)航、列表糟秘、彈窗球散、下拉菜單等。頁面只不過是這些組件的容器凌净，組件自由組合形成功能完善的界面屋讶，當(dāng)不需要某個(gè)組件，或者想要替換某個(gè)組件時(shí)斩芭，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行贬养。
組件化的特性
高內(nèi)聚性琴庵，組建功能必須是完整的，如我要實(shí)現(xiàn)下拉菜單功能儿礼，那在下拉菜單這個(gè)組件中贪庙，就把下拉菜單所需要的所有功能全部實(shí)現(xiàn)。
低耦合度止邮，通俗點(diǎn)說导披，代碼獨(dú)立不會(huì)和項(xiàng)目中的其他代碼發(fā)生沖突。在實(shí)際工程中鹰晨，我們經(jīng)常會(huì)涉及到團(tuán)隊(duì)協(xié)作，傳統(tǒng)按照業(yè)務(wù)線去編寫代碼的方式模蜡，就很容易相互沖突扁凛，所以運(yùn)用組件化方式就可大大避免這種沖突的存在谨朝、
每一個(gè)組件都有子集清晰的職責(zé)，完整的功能字币，較低的耦合便于單元測試和重復(fù)利用。
組件化的優(yōu)點(diǎn)
1.提高開發(fā)效率 2.方便重復(fù)使用 3.簡化調(diào)試步驟 4.提升整個(gè)項(xiàng)目的可維護(hù)性 5.便于協(xié)同開發(fā)
結(jié)語
由于缺乏經(jīng)驗(yàn)士复，還是吃了不少虧共苛，希望有大神愿意指點(diǎn)一下隅茎。
