常見的前端vue面試題

1、請講述下VUE的MVVM的理解？

MVVM 是 Model-View-ViewModel的縮寫，即將數據模型與數據表現層通過數據驅動進行分離，從而只需要關系數據模型的開發，而不需要考慮頁面的表現，具體說來如下：

Model 代表數據模型：主要用于定義數據和操作的業務邏輯。

View 代表頁面展示組件（即dom展現形式）：負責將數據模型轉化成UI 展現出來。

ViewModel 為model和view之間的橋梁：監聽模型數據的改變和控制視圖行為、處理用戶交互。通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉

在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。

2、VUE的生命周期及理解？

答：總共分為8個階段，具體為：創建前/后，載入前/后，更新前/后，銷毀前/后。

創建前/后： 在beforeCreated階段：vue實例的掛載元素$el和數據對象data都為undefined，還未初始化；在created階段，vue實例的數據對象data有了， $el還沒有。

載入前/后： 在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換；在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/后： 當data變化時，會觸發beforeUpdate和updated方法。

銷毀前/后： 在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。

具體講解及應用

beforeCreate： 在new一個vue實例后，只有一些默認的生命周期鉤子和默認事件，其他的東西都還沒創建，data和methods中的數據都還沒有初始化。不能在這個階段使用data中的數據和methods中的方法

create： data 和 methods都已經被初始化好了，如果要調用 methods 中的方法，或者操作 data 中的數據，最早可以在這個階段中操作

beforeMount： 執行到這個鉤子的時候，在內存中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的，不能直接操作頁面的dom和獲取dom對象

mounted： 執行到這個鉤子的時候，就表示Vue實例已經初始化完成了。此時組件脫離了創建階段，進入到了運行階段。如果我們想要通過插件操作頁面上的DOM節點，最早可以在和這個階段中進行

beforeUpdate： 當執行這個鉤子時，頁面中的顯示的數據還是舊的，data中的數據是更新后的，頁面還沒有和最新的數據保持同步

updated： 頁面顯示的數據和data中的數據已經保持同步了，都是最新的

beforeDestory： Vue實例從運行階段進入到了銷毀階段，這個時候上所有的data和 methods、指令、過濾器 ……都是處于可用狀態。還沒有真正被銷毀

destroyed： 這個時候上所有的data和methods、指令、過濾器 ……都是處于不可用狀態。組件已經被銷毀了。

3、v-if和v-show的區別？

共同點： 都能控制元素的顯示和隱藏；

不同點： 實現本質方法不同，v-show本質就是通過控制css中的display設置為none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內添加或者刪除DOM元素，若初始值為false，就不會編譯了。而且v-if不停的銷毀和創建比較消耗性能。

如果要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用v-if（初始渲染開銷較小，切換開銷比較大）。

4、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應該放到外層去

5、v-for中的key的理解？

需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點。主要是為了高效的更新虛擬DOM。

6、vue中transition的理解？

1）定義transition時需要設置對應的name，具體語法為：< transition name=“fade”>需要動畫的內容或者組件或者頁面< /transition>

2）過渡動畫主要包含6個class，分別為：

v-enter：定義元素進入過渡的初始狀態，在元素插入前生效，插入后一幀刪除，

v-enter-active：在元素插入前生效，在動畫完成后刪除，

v-enter-to：在元素插入后一幀生效，在動畫完成后刪除，

v-leave：離開過渡的初始狀態，在元素離開時生效，下一幀刪除

v-leave-active：在離開過渡時生效，在動畫完成后刪除

v-leave-to：離開過渡結束狀態，在離開過渡下一幀生效，在動畫完成后刪除

??：v會轉化為對應的transition的name值

3）當然我們也可以自定義這六個class 可以直接在transition中設置對應的屬性為對應的class名稱，屬性有：enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-to-class

4）在同時使用過渡和css動畫的時候 可以設置type屬性來制定vue內部機制監聽transitioned或者animationed事件來完成過渡還是動畫的監聽

5）如果需要設置對應的過渡時間，可以直接設置屬性duration，可以直接接收一個數字（單位為毫秒），也可以接收一個對象{enter:1000,leave:300}

6）也可以設置過渡的鉤子函數，具體有：before-enter，enter，after-enter，enter-cancelled，before-leave，leave，after-leave，leave-cancelled

7、vue的自定義指令？

自定義指令分為全局指令和組件指令，其中全局指令需要使用directive來進行定義，組件指令需要使用directives來進行定義，具體定義方法同過濾器filter或者其他生命周期，具體使用方法如下：

全局自定義指令 directive(name,{})，其中name表示定義的指令名稱（定義指令的時候不需要帶v-，但是在調用的時候需要哦帶v-），第二個參數是一個對象，對象中包括五個自定義組件的鉤子函數，具體包括：

1、bind函數： 只調用一次，指令第一次綁定在元素上調用，即初始化調用一次，

2、inserted函數： 并綁定元素插入父級元素（即new vue中el綁定的元素）時調用（此時父級元素不一定轉化為了dom）

3、update函數： 在元素發生更新時就會調用，可以通過比較新舊的值來進行邏輯處理

4、componentUpdated函數： 元素更新完成后觸發一次

5、unbind函數： 在元素所在的模板刪除的時候就觸發一次

鉤子函數對應的參數el,binding,vnode,oldnode,具體參數講解如下：

a、el指令所綁定的元素 可以直接操組dom元素

b、binding一個對象，具體包括以下屬性：

1）name：定義的指令名稱 不包括v-

2）value：指令的綁定值，如果綁定的是一個計算式，value為對應計算結果

3）oldvalue：指令綁定元素的前一個值，只對update和componentUpdated鉤子函數有值

4）expression：指令綁定的原始值 不對值進行任何加工

5）arg：傳遞給指令的參數

6）modifiers：指令修飾符，如：v-focus.show.async 則接收的modifiers為｛show：true，async：true｝

c、vnode：vue編譯生成的虛擬dom

d、oldVnode：上一個vnode，只在update和componentUpdated鉤子函數中有效

??：如果不需要其他鉤子函數，可以直接簡寫為：directive(“focus”,function(el,binding){})

8、vue的實現原理？

vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

具體步驟：

第一步：需要observe的數據對象進行遞歸遍歷， 包括子屬性對象的屬性，都加上setter和getter，這樣的話，給這個對象的某個值賦值，就會觸發setter，那么就能監聽到了數據變化

第二步：compile解析模板指令， 將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁， 主要做的事情是:

1、在自身實例化時往屬性訂閱器(dep)里面添加自己

2、自身必須有一個update()方法

3、待屬性變動dep.notice()通知時，能調用自身的update()方法，并觸發Compile中綁定的回調，則功成身退。

第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。

9、vue的diff算法理解？

1）diff算法的作用：

用來修改dom的一小段，不會引起dom樹的重繪

2）diff算法的實現原理：

diff算法將virtual dom的某個節點數據改變后生成的新的vnode與舊節點進行比較，并替換為新的節點，具體過程就是調用patch方法，比較新舊節點，一邊比較一邊給真實的dom打補丁進行替換

3）具體過程詳解：

a、在采用diff算法進行新舊節點進行比較的時候，比較是按照在同級進行比較的，不會進行跨級比較：

b、當數據發生改變的時候，set方法會調用dep.notify通知所有的訂閱者watcher，訂閱者會調用patch函數給響應的dom進行打補丁，從而更新真實的視圖

c、patch函數接受兩個參數，第一個是舊節點，第二個是新節點，首先判斷兩個節點是否值得比較，值得比較則執行patchVnode函數，不值得比較則直接將舊節點替換為新節點。如果兩個節點一樣就直接檢查對應的子節點，如果子節點不一樣就說明整個子節點全部改變不再往下對比直接進行新舊節點的整體替換

d、patchVnode函數：找到真實的dom元素；判斷新舊節點是否指向同一個對象，如果是就直接返回；如果新舊節點都有文本節點，那么直接將新的文本節點賦值給dom元素并且更新舊的節點為新的節點；如果舊節點有子節點而新節點沒有，則直接刪除dom元素中的子節點；如果舊節點沒有子節點，新節點有子節點，那么直接將新節點中的子節點更新到dom中；如果兩者都有子節點，那么繼續調用函數updateChildren

e、updateChildren函數：抽離出新舊節點的所有子節點，并且設置新舊節點的開始指針和結束指針，然后進行兩輛比較，從而更新dom（調整順序或者插入新的內容 結束后刪掉多余的內容）

10、vue組件的通信（父子組件和非父子組件）？

父子組件通信

傳遞參數可以使用props，傳遞函數可以直接在調用子組件的時候傳遞自定義事件，并使用$emit來調用，例如：

//父組件 <div classs="parent"><child @getinfo="myname" :userinfo="usermessage"></child><div>export default {data(){return {usermessage:'我是父親'}},methods:{myname(name){console.log('我的名字叫'+name)}}}//子組件 <div classs="child">來源：{{userinfo}}<button @click="getname">顯示我的名字</button><div>export default {props:['userinfo'],methods:{getname(){this.$emit('getinfo','bilibili')}}}

兄弟組件通信

首先建立一個vue實例空白頁（js文件）

import Vue from 'vue'export default new Vue()

組件a（數據發送方）通過使用 $emit 自定義事件把數據帶過去

<template><div><span>A組件->{{msg}}</span><input type="button" value="把a組件數據傳給b" @click ="send"></div> </template> <script> import vmson from "../../../util/emptyVue" export default {data(){return {msg:{a:'111',b:'222'}}},methods:{send:function(){vmson.$emit("aevent",this.msg)}} } </script>

組件b（數據接收方）使用而通過 $on監聽自定義事件的callback接收數據

<template><div><span>b組件,a傳的的數據為->{{msg}}</span></div> </template> <script>import vmson from "../../../util/emptyVue"export default {data(){return {msg:""}},mounted(){vmson.$on("aevent",(val)=>{//監聽事件aevent，回調函數要使用箭頭函數;console.log(val);//打印結果：我是a組件的數據this.msg = val;})}} </script>

11、vue的路由模式及區別？

hash模式在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取；

特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。

history模式：history采用HTML5的新特性；

提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。history 模式下，前端的 URL必須和實際向后端發起請求的URL一致，否則會報404錯誤

12、vue與react、angular的比較？

Vue

輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小只有幾十kb；

簡單易學：國人開發，中文文檔，不存在語言障礙 ，易于理解和學習；

雙向數據綁定：保留了angular的特點，在數據操作方面更為簡單；

組件化：保留了react的優點，實現了html的封裝和重用，在構建單頁面應用方面有著獨特的優勢；

視圖，數據，結構分離：使數據的更改更為簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；

虛擬DOM：dom操作是非常耗費性能的， 不再使用原生的dom操作節點，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；

運行速度更快:相比較與react而言，同樣是操作虛擬dom，就性能而言，vue存在很大的優勢。

React

相同點：
React采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鉤子函數，可以讓開發者定制化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。

不同點：
React采用的Virtual DOM會對渲染出來的結果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。

Angular

相同點：
都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。

不同點：
AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新，所有的數據都是獨立觸發的。

13、vue-roter的鉤子函數？

vue路由鉤子大致可以分為三類:

全局鉤子

主要包括beforeEach和afterEach,beforeEach函數有三個參數：

to:router即將進入的路由對象

from:當前導航即將離開的路由

next:Function,進行管道中的一個鉤子，如果執行完了，則導航的狀態就是 confirmed （確認的）；否則為false，終止導航。

afterEach函數不用傳next()函數這類鉤子主要作用于全局,一般用來判斷權限,以及以及頁面丟失時候需要執行的操作,例如:

//使用鉤子函數對路由進行權限跳轉 router.beforeEach((to, from, next) => {const role = localStorage.getItem('ms_username');if(!role && to.path !== '/login'){next('/login');}else if(to.meta.permission){// 如果是管理員權限則可進入，這里只是簡單的模擬管理員權限而已role === 'admin' ? next() : next('/403');}else{// 簡單的判斷IE10及以下不進入富文本編輯器，該組件不兼容if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請使用更高版本的瀏覽器查看', '瀏覽器不兼容通知', {confirmButtonText: '確定'});}else{next();}} })

2）單個路由里面的鉤子

主要用于寫某個指定路由跳轉時需要執行的邏輯

3）組件路由

主要包括beforeRouteEnter和beforeRouteUpdate,beforeRouteLeave,這幾個鉤子都是寫在組件里面也可以傳三個參數(to,from,next),作用與前面類似.

beforeRouteEnter(to, from, next) {next(vm => {if (vm.$route.meta.hasOwnProperty('auth_key') &&vm.$route.meta.auth_key != '') {if (!vm.hasPermission(vm.$route.meta.auth_key)) {vm.$router.replace('/admin/noPermission')}}}) }

14、vuex的使用？

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化，具體包括：

1）state：Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化并不沖突。存放的數據狀態，不可以直接修改里面的數據。

2）getter：state的計算屬性，類似vue的計算屬性，主要用來過濾一些數據。

3）action：actions可以理解為通過將mutations里面處里數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view 層通過 store.dispath 來分發 action。可以異步函數調用

4）mutation：mutations定義的方法動態修改Vuex 的 store 中的狀態或數據

5）modules：項目特別復雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

15、vue的filter的理解與用法？

1）全局過濾器必須寫在vue實例創建之前

Vue.filter('testfilter', function (value,text) { // 返回處理后的值return value+text})

2）局部寫法：在組件實例對象里掛載。

filters: {changemsg:(val,text)\=>{ return val + text} }

3）使用方式：只能使用在{{}}和：v-bind中，定義時第一個參數固定為預處理的數，后面的數為調用時傳入的參數，調用時參數第一個對應定義時第二個參數，依次往后類推

<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3> //多個過濾器也可以串行使用 <h2>{{name|filter1|filter2|filter3}}</h2>

4）vue-cli項目中注冊多個全局過濾器寫法：

//1.創建一個單獨的文件定義并暴露函數對象 const filter1 = function (val) {return val + '--1' } const filter2 = function (val) {return val + '--2' } const filter3 = function (val) {return val + '--3' }export default {filter1,filter2,filter3 }//2.導入main.js(在vue實例之前) import filters from './filter/filter.js'//3.循環注冊過濾器 Object.keys(filters).forEach(key=>{Vue.filter(key,filters[key]) })

16、vue的keep-alive的理解？

keep-alive 是Vue內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染，頁面第一次進入，鉤子的觸發順序:created-> mounted-> activated，退出時觸發 deactivated ,當再次進入（前進或者后退）時，只觸發activated事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中；其有幾個屬性如下：

1）include - 字符串或正則表達式，只有名稱匹配的組件會被緩存

2）exclude - 字符串或正則表達式，任何名稱匹配的組件都不會被緩存

3）include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind 。

<!-- 逗號分隔字符串，只有組件a與b被緩存。--> <keep-alive include="a,b"><component></component> </keep-alive><!-- 正則表達式 (需要使用 v-bind，符合匹配規則的都會被緩存) --> <keep-alive :include="/a|b/"><component></component> </keep-alive><!-- Array (需要使用 v-bind，被包含的都會被緩存) --> <keep-alive :include="['a', 'b']"><component></component> </keep-alive>

17、如何封裝一個vue組件？

根據業務需求，建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。

1、準備好組件的數據輸入。即分析好邏輯，定好 props 里面的數據、類型。

2、準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。

3、封裝完畢了，直接調用即可

18、vue首屏白屏如何解決？

1）路由懶加載

2）vue-cli開啟打包壓縮 和后臺配合 gzip訪問

3）進行cdn加速

4）開啟vue服務渲染模式

5）用webpack的externals屬性把不需要打包的庫文件分離出去，減少打包后文件的大小

6）在生產環境中刪除掉不必要的console.log

plugins: [new webpack.optimize.UglifyJsPlugin({ //添加-刪除console.logcompress: {warnings: false,drop_debugger: true,drop_console: true},sourceMap: true}),

7）開啟nginx的gzip ,在nginx.conf配置文件中配置

http { //在 http中配置如下代碼，gzip on;gzip_disable "msie6"; gzip_vary on; gzip_proxied any;gzip_comp_level 8; #壓縮級別gzip_buffers 16 8k;#gzip_http_version 1.1;gzip_min_length 100; #不壓縮臨界值gzip_types text/plain application/javascript application/x-javascript text/cssapplication/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;}

8）添加loading效果，給用戶一種進度感受

19、vue中的v-cloak的理解？

使用 v-cloak 指令設置樣式，這些樣式會在 Vue 實例編譯結束時，從綁定的 HTML 元素上被移除。

一般用于解決網頁閃屏的問題，在對一個的標簽中使用v-cloak，然后在樣式中設置[v-cloak]樣式,[v-cloak]需寫在 link 引入的css中，或者寫一個內聯css樣式，寫在import引入的css中不起作用。

20、vue中template編譯的理解？

答：就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點），具體為：

首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。

另外compile還負責合并option。
然后，AST會經過generate（將AST語法樹轉化成render funtion字符串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，里面有（標簽名、子節點、文本等等）

21、v-model的理解？

答：v-model用于表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：

1）v-bind綁定一個value屬性；

2）v-on指令給當前元素綁定input事件

22、computed和watch的用法和區別？

computed

1）變量不在 data中定義，而是定義在computed中，寫法跟寫方法一樣，有返回值。函數名直接在頁面模板中渲染，不加小括號 。
2）根據傳入的變量的變化 進行結果的更新。
3）計算屬性基于響應式依賴進行緩存。如其中的任意一個值未發生變化，它調用的就是上一次計算緩存的數據，因此提高了程序的性能。而methods中每調用一次就會重新計算一次，為了進行不必要的資源消耗，選擇用計算屬性。

watch

1）計算屬性的時候 初始化的時候就可以被監聽到并且計算 但是watch是發生改變的時候才會觸發。
2）當有一些數據需要隨著其它數據變動而變動時，或者當需要在數據變化時執行異步或開銷較大的操作時，使用 watch。

總結：

1）計算屬性變量在computed中定義，屬性監聽在data中定義。

2）計算屬性是聲明式的描述一個值依賴了其他值，依賴的值改變后重新計算結果更新DOM。屬性監聽的是定義的變量，當定義的值發生變化時，執行相對應的函數。

23、$nextTick的使用？

答：在vue中理解修改數據后，對應的dom需要一定的時間進行更新，因此為了能夠準確的后去更新后的dom，可以采用延遲回調的方法進行更新dom的獲取，所以出現了$nextTick來進行延遲回調。即：在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

24、data為什么是一個函數？

答：這是有JavaScript的特性所導致，在component中，data必須以函數的形式存在，不可以是對象。
組建中的data寫成一個函數，數據以函數返回值的形式定義，這樣每次復用組件的時候，都會返回一份新的data，相當于每個組件實例都有自己私有的數據空間，它們只負責各自維護的數據，不會造成混亂。而單純的寫成對象形式，就是所有的組件實例共用了一個data，這樣改一個全都改了。

25、vue單頁面和傳統的多頁面區別？

單頁面應用（SPA）

通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用于pc端。

多頁面（MPA）

指一個應用中有多個頁面，頁面跳轉時是整頁刷新

單頁面的優點：

用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點spa對服務器壓力較小；前后端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。

單頁面缺點：

不利于seo；導航不可用，如果一定要導航需要自行實現前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面復雜度提高很多。

26、vue常用的修飾符？

.stop： 等同于JavaScript中的event.stopPropagation()，防止事件冒泡；

.prevent： 等同于JavaScript中的event.preventDefault()，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；

.capture： 與事件冒泡的方向相反，事件捕獲由外到內；

.self： 只會觸發自己范圍內的事件，不包含子元素；

.once： 只會觸發一次。

27、vue更新數組時觸發視圖更新的方法？

答：push()；pop()；shift()；unshift()；splice()；sort()；reverse()

28、route和router的區別？

$router

router是VueRouter的一個對象，通過Vue.use(VueRouter)和VueRouter構造函數得到一個router的實例對象，這個對象中是一個全局的對象，他包含了所有的路由包含了許多關鍵的對象和屬性,常見的有：

1）push：向 history 棧添加一個新的記錄，當我們點擊瀏覽器的返回按鈕時可以看到之前的頁面

// 字符串this.$router.push('home') // 對象this.$router.push({ path: 'home' }) // 命名的路由this.$router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數，變成 /register?plan=123this.$router.push({ path: 'register', query: { plan: '123' }})

2）go：頁面路由跳轉 前進或者后退

// 頁面路由跳轉 前進或者后退 this.$router.go(-1) // 后退

3）replace：push方法會向 history 棧添加一個新的記錄，而replace方法是替換當前的頁面，不會向 history 棧添加一個新的記錄

$route

$route對象表示當前的路由信息，包含了當前URL解析得到的信息。包含當前的路徑、參數、query對象等。

$route.path：字符串，對應當前路由的路徑，總是解析為絕對路徑，如 “/foo/bar”。

$route.params：一個 key/value 對象，包含了 動態片段 和 全匹配片段，如果沒有路由參數，就是一個空對象。

$route.query：一個 key/value 對象，表示 URL 查詢參數。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象。

$route.hash：當前路由的 hash 值 (不帶#) ，如果沒有 hash 值，則為空字符串。

$route.fullPath：完成解析后的 URL，包含查詢參數和 hash 的完整路徑。

$route.matched：數組，包含當前匹配的路徑中所包含的所有片段所對應的配置參數對象。

$route.name：當前路徑名字

$route.meta：路由元信息

29、vue-router實現懶加載的方式？

vue異步組件

vue異步組件技術 ==== 異步加載
vue-router配置路由 , 使用vue的異步組件技術 , 可以實現按需加載 。但是,這種情況下一個組件生成一個js文件

/* vue異步組件技術 */ {path: '/home',name: 'home',component: resolve => require(['@/components/home'],resolve) },{path: '/index',name: 'Index',component: resolve => require(['@/components/index'],resolve) },{path: '/about',name: 'about',component: resolve => require(['@/components/about'],resolve) }

es提案的import()

路由懶加載(使用import)

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。 /* const Home = () => import('@/components/home') const Index = () => import('@/components/index') const About = () => import('@/components/about') */ // 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。把組件按組分塊 const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home') const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index') const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about') {path: '/about',component: About }, {path: '/index',component: Index }, {path: '/home',component: Home }

webpack的require,ensure()

vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。

/* 組件懶加載方案三: webpack提供的require.ensure() */ {path: '/home',name: 'home',component: r => require.ensure([], () => r(require('@/components/home')), 'demo') }, {path: '/index',name: 'Index',component: r => require.ensure([], () => r(require('@/components/index')), 'demo') }, {path: '/about',name: 'about',component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }

30、delete和Vue.delete刪除數組的區別？

答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。

31、路由跳轉和location.href的區別？

使用location.href=’/url’來跳轉，簡單方便，但是刷新了頁面；

使用路由方式跳轉，無刷新頁面，靜態跳轉；

32、vue的solt的用法？

在子組件內使用特殊的＜slot>元素就可以為這個子組件開啟一個slot（插槽），在父組件模板里，插入在子組件標簽內的所有內容將替代子組件的＜slot> 標簽及它的內容。

簡單說來就是：在子組件內部用 < slot></ slot>標簽占位，當在父組件中使用子組件的時候，我們可以在子組件中插入內容，而這些插入的內容則會替換 < slot>< /slot>標簽的位置。

當然：單個solt的時候可以不對solt進行命名，如果存在多個 則一個可以不命名，其他必須命名，在調用的時候指定名稱的對應替換slot，沒有指定的則直接默認無名稱的solt

33、$ emit 、$ on 、$ once 、$off理解？

$emit

觸發當前實例上的自定義事件（并將附加參數都傳給監聽器回調）

$on

監聽實例上自定義事件并調用回調函數，監聽emit觸發的事件

$once

監聽一個自定義事件，但是只觸發一次，在第一次觸發之后移除監聽器。

$off

用來移除自定義事件監聽器。如果沒有提供參數，則移除所有的事件監聽器；如果只提供了事件，則移除該事件所有的監聽器；如果同時提供了事件與回調，則只移除這個回調的監聽器。

這四個方法的實現原理是：通過對vue實例掛載，然后分別使用對象存儲數組對應的函數事件，其中emit通過循環查找存儲的數組中對應的函數進行調用，once只匹配一次就就結束，on是將對應的函數存儲到數組中，off是刪除數組中指定的元素或者所有的元素事件。具體可以參考文章：VUE emit實現

34、 $ root 、$ refs、$ parent的使用？

$root

可以用來獲取vue的根實例，比如在簡單的項目中將公共數據放再vue根實例上(可以理解為一個全局 store ),因此可以代替vuex實現狀態管理；

$refs

在子組件上使用ref特性后，this.屬性可以直接訪問該子組件。可以代替事件emit 和$on 的作用。

使用方式是通過ref特性為這個子組件賦予一個ID引用，再通過this.$refs.testId獲取指定元素。

注意：$refs只會在組件渲染完成之后生效，并且它們不是響應式的。這僅作為一個用于直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs。

$parent

$parent屬性可以用來從一個子組件訪問父組件的實例，可以替代將數據以 prop 的方式傳入子組件的方式；當變更父級組件的數據的時候，容易造成調試和理解難度增加；

35、vue開發遇到的問題？

1）樣式污染

答：在編寫樣式中，如果需要防止樣式的污染，可以使用兩種方式，一種是在組件的根元素上增加一個唯一的class或者id，然后在編寫組件的樣式時候在根元素對應的class或者id下進行編寫；另一種方式是在對應的style上添加scoped關鍵字，不過該關鍵字對引用的框架UI無效

2）router-link在安卓上不起作用

答：不起作用的原因是因為轉碼編譯的問題，可以使用babel來進行處理，安裝babel polypill插件解決

3）初始化頁面出現閃屏亂碼的問題

答：這是因為vue還沒有解析的情況下會容易出現花屏現象，看到類似于{{data}}的字樣，可以使用兩種方式來進行處理，一種為：在設置index.html的根元素的元素的樣式為display:none，然后在mounted中的$nextTick函數中display:block展示；另一種方式是使用vue的內置指令：v-cloak,并且在css中設置樣式

[v-cloak] { display: none; }

4）router-link上事件無效解決方法

答：使用@click.native來進行調用原生的js事件。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。

總結

以上是生活随笔為你收集整理的常见的前端vue面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。