vue面試題的示例及解答方法-創(chuàng)新互聯(lián)

這篇文章主要介紹了vue面試題的示例及解答方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)十載經(jīng)驗(yàn)成就非凡，專(zhuān)業(yè)從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)，成都網(wǎng)頁(yè)設(shè)計(jì)，成都網(wǎng)頁(yè)制作，軟文發(fā)稿，廣告投放等。十載來(lái)已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18982081108，我們期待您的來(lái)電！

Vue 越來(lái)越受歡迎了。放眼國(guó)內(nèi)外，不管是 BAT 等大廠，還是創(chuàng)業(yè)公司，Vue 都有廣泛的應(yīng)用。面試的時(shí)候，Vue 相關(guān)技術(shù)原理也一定是必考點(diǎn)。可以說(shuō)，對(duì)于任何一個(gè)前端工程師來(lái)說(shuō)，掌握 Vue 可能不是一個(gè)可選項(xiàng)，而更像一門(mén)“必修課”。

很多人做vue項(xiàng)目都是直接element ui等UI框架直接上，這些框架雖然在效率上幫了我們很多，但是，對(duì)于我們的技術(shù)提升而言，其實(shí)沒(méi)有任何的提升，而對(duì)于面試官提問(wèn)的vue核心技術(shù)，你也肯定回答不上來(lái)。

對(duì)于一位開(kāi)發(fā)者來(lái)說(shuō)，如果你對(duì)一個(gè)技術(shù)框架從來(lái)都是只停留在會(huì)用上，而從來(lái)不去了解這個(gè)框架里面核心技術(shù)的實(shí)現(xiàn)原理和背后的設(shè)計(jì)思想，我想在技術(shù)這條路上肯定走不遠(yuǎn)，我自己作為開(kāi)發(fā)者我有非常深刻的體會(huì).在這里也給大家做個(gè)走心的推薦，ant Design vue這個(gè)ui框架的作者在極客時(shí)間推出了一門(mén)課，叫vue開(kāi)發(fā)實(shí)戰(zhàn)（文章底部有購(gòu)買(mǎi)鏈接）。我自己也購(gòu)買(mǎi)了這門(mén)課，覺(jué)得講的不錯(cuò)，會(huì)帶著你掌握 Vue 的技術(shù)原理及其應(yīng)用， 也會(huì)對(duì)其底層原理有所了解，并且通過(guò)實(shí)戰(zhàn)項(xiàng)目，你將具備獨(dú)立負(fù)責(zé) Vue 前端項(xiàng)目的能力，對(duì)你的跳槽和面試以及vue的入門(mén)將會(huì)有非常大的幫助，很多購(gòu)買(mǎi)者包括我自己也覺(jué)得這里面干貨滿(mǎn)滿(mǎn)。推薦給大家有需要的人。

好了，進(jìn)入正題，今天在這里給大家?guī)?lái)一點(diǎn)vue的進(jìn)階面試題。

1、什么是MVVM？
答：MVVM是是Model-View-ViewModel的縮寫(xiě)，Model代表數(shù)據(jù)模型，定義數(shù)據(jù)操作的業(yè)務(wù)邏輯，View代表視圖層，負(fù)責(zé)將數(shù)據(jù)模型渲染到頁(yè)面上，ViewModel通過(guò)雙向綁定把View和Model進(jìn)行同步交互，不需要手動(dòng)操作DOM的一種設(shè)計(jì)思想。

2、怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)？
答：在router目錄下的index.js文件中，對(duì)path屬性加上/:id。  使用router對(duì)象的params.id

3、vue-router有哪幾種導(dǎo)航鉤子？   
答：三種，一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。第二種：組件內(nèi)的鉤子；第三種：?jiǎn)为?dú)路由獨(dú)享組件

4、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？
答：vue框架中狀態(tài)管理。在main.js引入store，注入。新建了一個(gè)目錄store，….. export 。場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)。音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車(chē)

5、MVVM和MVC區(qū)別？和其他框架(jquery)區(qū)別？那些場(chǎng)景適用？
答：MVVM和MVC都是一種設(shè)計(jì)思想，主要就是MVC中的Controller演變成ViewModel,，MVVM主要通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是操作節(jié)點(diǎn)，解決了MVC中大量的DOM操作使頁(yè)面渲染性能降低，加載速度慢，影響用戶(hù)體驗(yàn)問(wèn)題。主要用于數(shù)據(jù)操作比較多的場(chǎng)景。
場(chǎng)景：數(shù)據(jù)操作比較多的場(chǎng)景，更加便捷

6、Vue公司的雙向數(shù)據(jù)綁定原理是什么？
答：vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者 - 訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。

7、請(qǐng)說(shuō)下封裝vue組件的過(guò)程？
答：首先，組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了我們傳統(tǒng)項(xiàng)目開(kāi)發(fā)：效率低，難維護(hù)，復(fù)用性等問(wèn)題。

然后，使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。子組件需要數(shù)據(jù)，可以在道具中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父組件?？梢圆捎冒l(fā)射方法

8、聊聊你對(duì)Vue.js的模板編譯的理解
答：簡(jiǎn)而言之，就是先轉(zhuǎn)化成AST樹(shù)，再得到的渲染函數(shù)返回VNODE（Vue公司的虛擬DOM節(jié)點(diǎn)）
詳情步驟：

首先，通過(guò)編譯編譯器把模板編譯成AST語(yǔ)法樹(shù)（抽象語(yǔ)法樹(shù)即源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式），編譯是createCompiler的返回值，createCompiler是用以創(chuàng)建編譯器的。負(fù)責(zé)合并選項(xiàng)。

然后，AST會(huì)經(jīng)過(guò)生成（將AST語(yǔ)法樹(shù)轉(zhuǎn)化成渲染功能字符串的過(guò)程）得到渲染函數(shù)，渲染的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點(diǎn)，里面有（標(biāo)簽名，子節(jié)點(diǎn)，文本等等）

9、<keep-alive></keep-alive>的作用是什么，如何使用？
答：包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，主要用于保留組件狀態(tài)或避免重新渲染；
使用：簡(jiǎn)單頁(yè)面時(shí)
緩存：  <keep-alive include=”組件名”></keep-alive>
不緩存：<keep-alive exclude=”組件名”></keep-alive>

10、vue和react區(qū)別
答：相同點(diǎn)：都鼓勵(lì)組件化，都有’props’的概念，都有自己的構(gòu)建工具，Reat與Vue只有框架的骨架，其他的功能如路由、狀態(tài)管理等是框架分離的組件。

不同點(diǎn)：React：數(shù)據(jù)流單向，語(yǔ)法—JSX，在React中你需要使用setState()方法去更新?tīng)顟B(tài)。Vue：數(shù)據(jù)雙向綁定，語(yǔ)法--HTML，state對(duì)象并不是必須的，數(shù)據(jù)由data屬性在Vue對(duì)象中進(jìn)行管理。適用于小型應(yīng)用，但對(duì)于對(duì)于大型應(yīng)用而言不太適合。

11、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)?
v-show指令是通過(guò)修改元素的displayCSS屬性讓其顯示或者隱藏。
v-if指令是直接銷(xiāo)毀和重建DOM達(dá)到讓元素顯示和隱藏的效果。

12、$route和$router的區(qū)別
答：$route是“路由信息對(duì)象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等

13、vue中 key 值的作用
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。key的作用主要是為了高效的更新虛擬DOM

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue面試題的示例及解答方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)標(biāo)題：vue面試題的示例及解答方法-創(chuàng)新互聯(lián)
當(dāng)前地址：http://muchs.cn/article34/idgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、建站公司、網(wǎng)站收錄、網(wǎng)站策劃、用戶(hù)體驗(yàn)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)