vue有哪些面試題

小編給大家分享一下vue有哪些面試題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一、  mvvm框架是什么？   

    ue是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架，當(dāng)視圖改變更新模型層，當(dāng)模型層改變更新視圖層。在vue中，使用了雙向綁定技術(shù)，就是View的變化能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新到View。   

二 、  Vue的生命周期

        beforeCreate（創(chuàng)建前）$elrenderhtmlel 內(nèi)容替換el屬性指向的html 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬
        updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM已經(jīng)更新，所以可以執(zhí)行依賴于
        beforeDestroy（銷毀前） Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理

訂閱者模式的方式，通過(guò)setter對(duì)象傳給 Vue 實(shí)例來(lái)作為它的Object.defineProperty 將它們轉(zhuǎn)為 Vue         vue的數(shù)據(jù)雙向綁定作為數(shù)據(jù)綁定的入口，整合Observer，Observer來(lái)解析編譯模板指令（vue中是用來(lái)解析搭起observer和input變更雙向綁定效果。

1.父組件與子組件傳值;

        eventBus，就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件。項(xiàng)目比較小時(shí)，用這個(gè)比較合適。（雖然也有不少人推薦直接用

undefinedundefinedundefinedundefined

六、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)？

        當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以，不推薦v-if和v-for同時(shí)使用。
        如果v-if和v-for一起用的話，vue中的的會(huì)自動(dòng)提示v-if應(yīng)該放到外層去。   

undefinedundefinedundefinedundefined

七、如何獲取dom?

        ref="domName" 用法：this.$refs.domName

undefinedundefinedundefinedundefined

八、說(shuō)出幾種vue當(dāng)中的指令和它的用法？

            v-model雙向數(shù)據(jù)綁定；
            v-for循環(huán)；
            v-if v-show顯示與隱藏；
            v-on事件；v-once:只綁定一次。   

undefinedundefinedundefinedundefined

九、vue-loader是什么？使用它的用途有哪些？

        vue文件的一個(gè)加載器，將template/js/style轉(zhuǎn)換成js模塊。
        用途：js可以寫es6、style樣式可以scss或less、template可以加jade等   

undefinedundefinedundefinedundefined

十、v-modal的使用

        v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語(yǔ)法糖，這個(gè)背后就做了兩個(gè)操作：
        v-bind綁定一個(gè)value屬性；
        v-on指令給當(dāng)前元素綁定input事件。   

undefinedundefinedundefinedundefined

十一、分別簡(jiǎn)述computed和watch的使用場(chǎng)景

    computed:
　　　　當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed
　　　　最典型的栗子： 購(gòu)物車商品結(jié)算的時(shí)候
    watch:
　　　　當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch
　　　　栗子：搜索數(shù)據(jù)

undefinedundefinedundefinedundefined

十二、Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

        vue 雙向數(shù)據(jù)綁定是通過(guò) 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的， 也就是說(shuō)數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是Object.defineProperty()方法。   

undefinedundefinedundefinedundefined

十三、單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

        單頁(yè)面應(yīng)用（SPA），通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用，瀏覽器一開(kāi)始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中。但在寫的時(shí)候，還是會(huì)分開(kāi)寫（頁(yè)面片段），然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)用于pc端。
多頁(yè)面（MPA），就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面，頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新
單頁(yè)面的優(yōu)點(diǎn)：
    用戶體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較?。磺昂蠖朔蛛x；頁(yè)面效果會(huì)比較炫酷（比如切換頁(yè)面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫）。
單頁(yè)面缺點(diǎn)：
    不利于seo；導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。（由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）；初次加載時(shí)耗時(shí)多；頁(yè)面復(fù)雜度提高很多。

undefinedundefinedundefinedundefined

十四、v-if和v-for的優(yōu)先級(jí)

    當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以，不推薦v-if和v-for同時(shí)使用。
    如果v-if和v-for一起用的話，vue中的的會(huì)自動(dòng)提示v-if應(yīng)該放到外層去。   

undefinedundefinedundefinedundefined

十五、assets和static的區(qū)別

        相同點(diǎn)：assets和static兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片，字體圖標(biāo)，樣式文件等都可以放在這兩個(gè)文件下，這是相同點(diǎn)
        不相同點(diǎn)：assets中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí)，也就是運(yùn)行npm run build時(shí)會(huì)將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳，所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積，代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在static文件中跟著index.html一同上傳至服務(wù)器。static中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程，而是直接進(jìn)入打包好的目錄，直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳，在打包時(shí)會(huì)提高一定的效率，但是static中的資源文件由于沒(méi)有進(jìn)行壓縮等操作，所以文件的體積也就相對(duì)于assets中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。   

undefinedundefinedundefinedundefined

十六、vue常用的修飾符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件，而不停止事件的進(jìn)一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)；
.self：只會(huì)觸發(fā)自己范圍內(nèi)的事件，不包含子元素；
.once：只會(huì)觸發(fā)一次。

undefinedundefinedundefinedundefined

十七、vue-cli如何新增自定義指令？

2.全局指令

<div id="app">

    <div v-dir1></div>

    <div v-dir2></div>

</div>

undefinedundefinedundefinedundefined

十八、vue如何自定義一個(gè)過(guò)濾器？

JS代碼： (msg) 的值作為第一個(gè)參數(shù)。

undefinedundefinedundefinedundefined

十九、vue路由的鉤子函數(shù)

首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)，titlebeforeEachfromto：from：next：next<span segoe="" ui";="" mso-hansi-font-family:"segoe="" ui";mso-bidi-font-family:"segoe="" ui";color:#212529;="" mso-font-kerning:0pt'="">方法的調(diào)用參數(shù)?？梢钥刂凭W(wǎng)頁(yè)的跳轉(zhuǎn)。<span lang="EN-US" segoe="" ui",sans-serif;mso-fareast-font-family:="" 宋體;color:#212529;mso-font-kerning:0pt'="">

undefinedundefinedundefinedundefined

二十、params和query的區(qū)別

用法：query要用path來(lái)引入，params要用name來(lái)引入，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name。
url地址顯示：query更加類似于我們ajax中get傳參，params則類似于post，說(shuō)的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示
注意點(diǎn)：query刷新不會(huì)丟失query里面的數(shù)據(jù)
params刷新 會(huì) 丟失params里面的數(shù)據(jù)。   

undefinedundefinedundefinedundefined

二十一、created和mounted的區(qū)別

created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。   

undefinedundefinedundefinedundefined

二十二、RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問(wèn)題

方法一：只用a標(biāo)簽，不適用button標(biāo)簽；

方法二：使用button標(biāo)簽和Router.navigate方法   

undefinedundefinedundefinedundefined

二十三、Vue2中注冊(cè)在router-link上事件無(wú)效解決方法

使用@click.native。

原因：router-link會(huì)阻止click事件，.native指直接監(jiān)聽(tīng)一個(gè)原生事件。   

二十四、  Vue里面router-link在電腦上有用，在安卓上沒(méi)反應(yīng)怎么解決？

Vue路由在Android機(jī)上有問(wèn)題，babel問(wèn)題，安裝babel polypill插件解決。   

看完了這篇文章，相信你對(duì)“vue有哪些面試題”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！