①：說(shuō)說(shuō)Vue和Angular、ReactJS的相同點(diǎn)和不同點(diǎn)
②：簡(jiǎn)單描述一下Vue中的MVVM模型
③：v-if和v-show指令有什么區(qū)別？
④：如何阻止Vue中的綁定事件不發(fā)生冒泡
⑤：父、子組件間是如何通信的？
⑥：非父子層級(jí)的組件如何實(shí)現(xiàn)通信？
⑦：什么是動(dòng)態(tài)組件？他的作用是什么？
⑧：為什么組件中的data屬性的值必須是一個(gè)函數(shù)？
答案與詳解
Q
說(shuō)說(shuō)Vue和Angular、ReactJS的相同點(diǎn)和不同點(diǎn)
與React的相同：
●都使用了Virtual DOM
●提供了響應(yīng)式和組件化的視圖組件
●將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。
與React的區(qū)別：
●組件的響應(yīng)式渲染
React的組件的數(shù)據(jù)狀態(tài)發(fā)生變化時(shí)，它會(huì)以該組件為根，重新渲染整個(gè)組件子樹(shù)；而Vue不只去渲染需要渲染的組件。
●HTML+CSS的編寫
React使用的JSX語(yǔ)法，將HTML、CSS和JS混寫；而Vue使用的是templates模板方式，完全融合與經(jīng)典的Web技術(shù)。
與Angular的相同：
Vue早起的靈感是來(lái)源于Angular，所以很多語(yǔ)法是類似的，如v-if和ng-if。
與Angular的區(qū)別：
●與Angular 1對(duì)比，Vue的性能更加優(yōu)越，Angular性能會(huì)隨著watcher的增加而變慢，而且Angular中一些watcher會(huì)出觸發(fā)另一個(gè)更新，使得“臟檢查循環(huán)”可能會(huì)運(yùn)行多次。
●Angular事實(shí)上必須用TypeScript來(lái)開(kāi)發(fā)，而且Angular對(duì)于TS的支持非常全面，而Vue暫時(shí)對(duì)于TS的支持還在改進(jìn)階段。
●Vue的體積更小，一個(gè)包含了 vuex + vue-router 的 Vue 項(xiàng)目 (30kb gzipped) 相比使用了這些優(yōu)化的 angular-cli 生成的默認(rèn)項(xiàng)目尺寸 (~130kb) 還是要小的多。
Q
簡(jiǎn)單描述一下Vue中的MVVM模型
Vue是以數(shù)據(jù)為驅(qū)動(dòng)的，Vue自身將DOM和數(shù)據(jù)進(jìn)行綁定，一旦創(chuàng)建綁定，DOM和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM會(huì)跟著變化。
ViewModel是Vue的核心，它是Vue的一個(gè)實(shí)例。Vue實(shí)例是作用在某個(gè)HTML元素上的，這個(gè)HTML元素可以是body，也可以是某個(gè)id所指代的元素。 DOM Listeners和Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽(tīng)頁(yè)面所有View層DOM元素的變化，當(dāng)發(fā)生變化，Model層的數(shù)據(jù)隨之變化；Data Bindings監(jiān)聽(tīng)Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化，View層的DOM元素隨之變化。
Q
v-if和v-show指令有什么區(qū)別？
v-show對(duì)應(yīng)的值無(wú)論是true還是false，對(duì)應(yīng)Html元素都會(huì)存在于瀏覽器的文檔中；而v-if如果是false的話，直接不在文檔中了。
Q
如何阻止Vue中的綁定事件不發(fā)生冒泡
可以使用“事件修飾符”來(lái)處理事件冒泡，如：v-on:click.stop阻止事件冒泡
或v-on:submit.prevent阻止默認(rèn)事件。
Q
父、子組件間是如何通信的？
在Vue中，每個(gè)組件實(shí)例的作用域是孤立的。這也意味著不能（也不應(yīng)該）在子組件的模板內(nèi)直接飲用父組件的數(shù)據(jù)。父組件通過(guò)Props向子組件傳遞數(shù)據(jù)，而子組件通過(guò)Events向父組件傳遞數(shù)據(jù)。

來(lái)自vue官網(wǎng)
Q
非父子層級(jí)的組件如何實(shí)現(xiàn)通信？
簡(jiǎn)單的應(yīng)用場(chǎng)景下，可以使用一個(gè)空的Vue實(shí)例作為中央事件總線。
在復(fù)雜的情況下，可以考慮使用Vue 官方提供的狀態(tài)管理模式——Vuex來(lái)進(jìn)行管理。
Q
什么是動(dòng)態(tài)組件？他的作用是什么？
通過(guò)使用保留的 <component> 元素，動(dòng)態(tài)地綁定到它的 is 特性，我們讓多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，并可以動(dòng)態(tài)地切換。
除此之外，Vue還提供了keep-alve指令。keep-alive指令允許把切換出去的組件保留在內(nèi)存中，并保留它的狀態(tài)或避免重新渲染。
Q
為什么組件中的data屬性的值必須是一個(gè)函數(shù)？
因?yàn)樵谝粋€(gè)組件被多次引用的情況下，如果data的值是一個(gè)Object的話，那么由于Object是一個(gè)引用類型，所以即使是該組件被多次引用，而其實(shí)操作的是同一個(gè)對(duì)象，最終導(dǎo)致了引用該組件的所有位置都同步的顯示了。

轉(zhuǎn)載于:https://blog.51cto.com/14334627/2399253

總結(jié)

以上是生活随笔為你收集整理的前端工程师必须知道的vue前端面试题目汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。