vue有哪些面試題

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

一、  mvvm框架是什么？   

    ue是實現了雙向數據綁定的mvvm框架，當視圖改變更新模型層，當模型層改變更新視圖層。在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。   

二 、  Vue的生命周期

        beforeCreate（創建前）$elrenderhtmlel 內容替換el屬性指向的html 在數據更新之前調用，發生在虛擬
        updated（更新后） 在由于數據更改導致的虛擬DOM已經更新，所以可以執行依賴于
        beforeDestroy（銷毀前） Vue實現數據雙向綁定的原理

訂閱者模式的方式，通過setter對象傳給 Vue 實例來作為它的Object.defineProperty 將它們轉為 Vue         vue的數據雙向綁定作為數據綁定的入口，整合Observer，Observer來解析編譯模板指令（vue中是用來解析搭起observer和input變更雙向綁定效果。

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

        eventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。（雖然也有不少人推薦直接用

undefinedundefinedundefinedundefined

六、v-show和v-if指令的共同點和不同點？

        當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味著 v-if 將分別重復運行于每個 v-for 循環中。所以，不推薦v-if和v-for同時使用。
        如果v-if和v-for一起用的話，vue中的的會自動提示v-if應該放到外層去。   

undefinedundefinedundefinedundefined

七、如何獲取dom?

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

undefinedundefinedundefinedundefined

八、說出幾種vue當中的指令和它的用法？

            v-model雙向數據綁定；
            v-for循環；
            v-if v-show顯示與隱藏；
            v-on事件；v-once:只綁定一次。   

undefinedundefinedundefinedundefined

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

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

undefinedundefinedundefinedundefined

十、v-modal的使用

        v-model用于表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：
        v-bind綁定一個value屬性；
        v-on指令給當前元素綁定input事件。   

undefinedundefinedundefinedundefined

十一、分別簡述computed和watch的使用場景

    computed:
　　　　當一個屬性受多個屬性影響的時候就需要用到computed
　　　　最典型的栗子： 購物車商品結算的時候
    watch:
　　　　當一條數據影響多條數據的時候就需要用watch
　　　　栗子：搜索數據

undefinedundefinedundefinedundefined

十二、Vue中雙向數據綁定是如何實現的？

        vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟著變化，視圖變化，數據也隨之發生改變；
核心：關于VUE雙向數據綁定，其核心是Object.defineProperty()方法。   

undefinedundefinedundefinedundefined

十三、單頁面應用和多頁面應用區別及優缺點

        單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用于pc端。
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新
單頁面的優點：
    用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點spa對服務器壓力較小；前后端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。
單頁面缺點：
    不利于seo；導航不可用，如果一定要導航需要自行實現前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面復雜度提高很多。

undefinedundefinedundefinedundefined

十四、v-if和v-for的優先級

    當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味著 v-if 將分別重復運行于每個 v-for 循環中。所以，不推薦v-if和v-for同時使用。
    如果v-if和v-for一起用的話，vue中的的會自動提示v-if應該放到外層去。   

undefinedundefinedundefinedundefined

十五、assets和static的區別

        相同點：assets和static兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點
        不相同點：assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解為壓縮體積，代碼格式化。而壓縮后的靜態資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務器。static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資源文件由于沒有進行壓縮等操作，所以文件的體積也就相對于assets中打包后的文件提交較大點。在服務器中就會占據更大的空間。   

undefinedundefinedundefinedundefined

十六、vue常用的修飾符

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

undefinedundefinedundefinedundefined

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

2.全局指令

<div id="app">

    <div v-dir1></div>

    <div v-dir2></div>

</div>

undefinedundefinedundefinedundefined

十八、vue如何自定義一個過濾器？

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

undefinedundefinedundefinedundefined

十九、vue路由的鉤子函數

首頁可以控制導航跳轉，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'="">方法的調用參數。可以控制網頁的跳轉。<span lang="EN-US" segoe="" ui",sans-serif;mso-fareast-font-family:="" 宋體;color:#212529;mso-font-kerning:0pt'="">

undefinedundefinedundefinedundefined

二十、params和query的區別

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

undefinedundefinedundefinedundefined

二十一、created和mounted的區別

created:在模板渲染成html前調用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作。   

undefinedundefinedundefinedundefined

二十二、RouterLink在IE和Firefox中不起作用（路由不跳轉）的問題

方法一：只用a標簽，不適用button標簽；

方法二：使用button標簽和Router.navigate方法   

undefinedundefinedundefinedundefined

二十三、Vue2中注冊在router-link上事件無效解決方法

使用@click.native。

原因：router-link會阻止click事件，.native指直接監聽一個原生事件。   

二十四、  Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決？

Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。   

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