△?是新朋友嗎？記得先點web前端學習圈關注我哦～

1.vue優點？

答：

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

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

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

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

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

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

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

2.vue父組件向子組件傳遞數據？

答：通過?props

3.子組件像父組件傳遞事件？

答：$emit?方法

4.v-show 和 v-if指令的共同點和不同點？

答:

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

不同點：?實現本質方法不同，v-show?本質就是通過控制 css 中的?display?設置為?none，控制隱藏，只會編譯一次；v-if?是動態的向 DOM 樹內添加或者刪除 DOM 元素，若初始值為?false?，就不會編譯了。而且?v-if?不停的銷毀和創建比較消耗性能。總結：如果要頻繁切換某節點，使用?v-show?(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用?v-if(初始渲染開銷較小，切換開銷比較大)。

5. ?如何讓CSS只在當前組件中起作用?

答：在組件中的?style?前面加上?scoped

6. ? 的作用是什么?

答:?keep-alive?是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。

7.如何獲取dom?

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

8.說出幾種vue當中的指令和它的用法？

答：v-model?雙向數據綁定；

v-for?循環；

v-if?v-show?顯示與隱藏；

v-on?事件；v-once?: 只綁定一次。

9. vue-loader是什么？使用它的用途有哪些？

答：vue 文件的一個加載器，將?template/js/style?轉換成?js?模塊。

用途：js?可以寫?es6?、?style樣式可以?scss?或?less?、?template?可以加?jade等

10.為什么使用key?

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

11.axios及安裝?

答：請求后臺資源的模塊。npm install axios —save?裝好， js中使用?import?進來，然后?.get?或?.post?。返回在?.then?函數中如果成功，失敗則是在?.catch?函數中。

12.v-modal的使用

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

13.請說出vue.cli項目中src目錄每個文件夾和文件的用法？

答：assets?文件夾是放靜態資源；components?是放組件；router?是定義路由相關的配置; ?app.vue?是一個應用主組件；main.js?是入口文件。

14.分別簡述computed和watch的使用場景

答：

• computed?: 當一個屬性受多個屬性影響的時候就需要用到?computed?，最典型的栗子：購物車商品結算的時候

• watch?: 當一條數據影響多條數據的時候就需要用?watch?，栗子：搜索數據

15.v-on可以監聽多個方法嗎？

答：可以，栗子：。

16.$nextTick的使用

答：當你修改了data?的值然后馬上獲取這個?dom?元素的值，是不能獲取到更新后的值， 你需要使用?$nextTick?這個回調，讓修改后的?data?值渲染更新到?dom?元素之后在獲取，才能成功。

17.vue組件中data為什么必須是一個函數？

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

18.漸進式框架的理解

答：主張最少；可以根據不同的需求選擇不同的層級；

19.Vue中雙向數據綁定是如何實現的？

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

20.單頁面應用和多頁面應用區別及優缺點

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

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

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

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

21.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?應該放到外層去。

22.assets和static的區別

答：相同點：?assets?和?static?兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點

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

建議：?將項目中?template需要的樣式文件js文件等都可以放置在?assets?中，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css?等文件可以放置在?static?中，因為這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。

23.vue常用的修飾符

答：

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

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

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

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

• .once?：只會觸發一次。

24.vue的兩個核心點

答：數據驅動、組件系統

數據驅動：?ViewModel，保證數據和視圖的一致性。

組件系統：?應用類UI可以看作全部是由組件樹構成的。

25.vue和jQuery的區別

答：jQuery是使用選擇器(?$?)選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在于可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();?,它還是依賴DOM元素的值。Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

26. 引進組件的步驟

答: 在template中引入組件；在script的第一行用import引入路徑；用component中寫上組件名稱。

27.delete和Vue.delete刪除數組的區別

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

28.SPA首屏加載慢如何解決

答：安裝動態懶加載所需插件；使用CDN資源。

29.Vue-router跳轉和location.href有什么區別

答：使用?location.href= /url?來跳轉，簡單方便，但是刷新了頁面；使用?history.pushState( /url )?，無刷新頁面，靜態跳轉；引進 router ，然后使用?router.push( /url )?來跳轉，使用了?diff?算法，實現了按需加載，減少了 dom 的消耗。其實使用 router 跳轉和使用?history.pushState()?沒什么差別的，因為vue-router就是用了?history.pushState()?，尤其是在history模式下。

30. vue slot

答：簡單來說，假如父組件需要在子組件內放一些DOM，那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。

31.你們vue項目是打包了一個js文件，一個css文件，還是有多個文件？

答：根據vue-cli腳手架規范，一個js文件，一個CSS文件。

32.Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決？

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

33.Vue2中注冊在router-link上事件無效解決方法

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

34.RouterLink在IE和Firefox中不起作用(路由不跳轉)的問題

答: 方法一：只用a標簽，不適用button標簽；方法二：使用button標簽和Router.navigate方法

35.axios的特點有哪些

答：

從瀏覽器中創建XMLHttpRequests；

node.js創建http請求；

支持Promise API；

攔截請求和響應；

轉換請求數據和響應數據；

取消請求；

自動換成json。

axios中的發送字段的參數是data跟params兩個，兩者的區別在于params是跟請求地址一起發送的，data的作為一個請求體進行發送

params一般適用于get請求，data一般適用于post put 請求。

36.請說下封裝 vue 組件的過程？

答：

建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時，碼碼10分鐘，程序猿的準則。) 　　

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

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

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

37.params和query的區別

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

注意點：query刷新不會丟失query里面的數據 params刷新 會 丟失 params里面的數據。

38.vue初始化頁面閃動問題

答：使用vue開發時，在vue初始化之前，由于?div?是不歸?vue?管的，所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似于?{{message}}?的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。首先：在css里加上?[v-cloak] { display: none; }?。如果沒有徹底解決問題，則在根元素加上 style="display: none;" :style="{display: ?block }"

39.vue更新數組時觸發視圖更新的方法

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

40.vue常用的UI組件庫

答：Mint UI，element，VUX

41.vue修改打包后靜態資源路徑的修改

答：cli2 版本：將 config/index.js 里的 assetsPublicPath 的值改為 ?./ ?。

build:?{?
??//?...?
??assetsPublicPath:? ./ ,?
??//?...??
}?

cli3版本：在根目錄下新建vue.config.js 文件，然后加上以下內容：(如果已經有此文件就直接修改)

module.exports?=?{?

生命周期函數面試題篇

### 42.什么是 vue 生命周期？有什么作用？

答：每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數，這給了用戶在不同階段添加自己的代碼的機會。(ps：生命周期鉤子就是生命周期函數)例如，如果要通過某些插件操作DOM節點，如想在頁面渲染完后彈出廣告窗， 那我們最早可在mounted 中進行。

43.第一次頁面加載會觸發哪幾個鉤子？

答：beforeCreate， created， beforeMount， mounted

44.簡述每個周期具體適合哪些場景

答：

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

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

beforeMount：?執行到這個鉤子的時候，在內存中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的

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

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

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

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

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

45.created和mounted的區別

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

46.vue獲取數據在哪個周期函數

答：一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.

47.請詳細說下你對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結構依然存在。

vue 路由面試題篇

48.mvvm 框架是什么？

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

49.vue-router 是什么?它有哪些組件

答：vue用來寫路由一個插件。router-link、router-view

50.active-class 是哪個組件的屬性？

答：vue-router模塊的router-link組件。children數組來定義子路由

51.怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值？

答：在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id。

52.vue-router 有哪幾種導航鉤子?

答：三種，

第一種：?是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。

第二種：?組件內的鉤子

第三種：?單獨路由獨享組件

53. `$route` 和 `$router` 的區別

答：$router?是VueRouter的實例，在script標簽中想要導航到不同的URL,使用?$router.push?方法。返回上一個歷史history用?$router.to(-1)

$route?為當前router跳轉對象。里面可以獲取當前路由的name,path,query,parmas等。

54.vue-router的兩種模式

答:?hash模式：?即地址欄 URL 中的 # 符號；

history模式：?window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定瀏覽器支持)。

55.vue-router實現路由懶加載( 動態加載路由 )

答:三種方式

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

第二種：?路由懶加載(使用import)。

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

vuex常見面試題篇

56.vuex是什么？怎么使用？哪種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。

新建了一個目錄store.js，….. export 。

場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

57.vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

state => 基本數據(數據源存放地)

getters => 從基本數據派生出來的數據

mutations => 提交更改數據的方法，同步！

actions => 像一個裝飾器，包裹mutations，使之可以異步。

modules => 模塊化Vuex

58.Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？

答：如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state里。

如果被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用。

以上面試題僅供個人學習，如有錯誤請指正。謝謝。

源自：https://zhuanlan.zhihu.com/p/92407628

聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

感謝 · 轉發歡迎大家留言

總結

以上是生活随笔為你收集整理的vue 离开页面事件_【必看】58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...的全部內容，希望文章能夠幫你解決所遇到的問題。

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