前言：一句話就能回答的VUE面試題

vue中$emit事件無法觸發(fā)？

emit里的事件名不要用大寫字母；

渲染的時候key給什么值，可以使用index嗎，用id好還是index好？

當我們在使用v-for進行渲染時，盡可能使用渲染元素自身屬性的id給渲染的元素綁定一個key值，這樣在當前渲染元素的DOM結構發(fā)生變化時，能夠單獨響應該元素而不觸發(fā)所有元素的渲染。

1.css只在當前組件起作用

答：在style標簽中寫入scoped例如：<style scoped></style>

2.v-if 和 v-show 區(qū)別

答：v-if按照條件是否渲染，v-show是display的block或none；

3.$route和$router的區(qū)別

答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數(shù)等。

4.vue.js的兩個核心是什么？

答：數(shù)據驅動、組件系統(tǒng)

5.vue幾種常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修飾符？

答：.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)；.capture: 事件偵聽，事件發(fā)生的時候會調用

7.v-on 可以綁定多個方法嗎？

答：可以

8.vue中 key 值的作用？

答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數(shù)據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM。

9.什么是vue的計算屬性？

答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數(shù)據進行復雜處理，且可能多次使用的情況下，盡量采取計算屬性的方式。

好處：①使得數(shù)據處理結構清晰；②依賴于數(shù)據，數(shù)據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取數(shù)據，也可以使用set方法改變數(shù)據；⑥相較于methods，不管依賴的數(shù)據變不變，methods都會重新計算，但是依賴數(shù)據不變的時候computed從緩存中獲取，不會重新計算。

10.vue等單頁面應用及其優(yōu)缺點

答：優(yōu)點：Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據綁定和組合的視圖組件，核心是一個響應的數(shù)據綁定系統(tǒng)。MVVM、數(shù)據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。

缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現(xiàn)前進、后退。。

一：v-show和v-if有什么區(qū)別？

1：v-if通過添加或刪除dom元素，v-show是通過控制css樣式display來顯示和隱藏；

2：v-if在有一個局部的編譯/卸載的過程，切換過程中合適的銷毀和重構內部事件、組件‘；v-show只是簡單地css的切換；

3：v-if是惰性的；如果初始條件為假，什么也不做。只有條件第一次為真的時候才開始局部編譯；v-show在任何條件下可以編譯，然后被緩存，保留DOM元素；

4：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

5：v-if適合運營條件不大可能改變；v-show適合頻繁切換；

?

二：vue中MVVM模式是怎么樣的？

1：model View Viewmodel 的縮寫；

model代表數(shù)據模型；

view 代表視圖；

Viewmodel代表：監(jiān)聽數(shù)據本模型的改變和視圖的變化，處理用戶交互，簡單的理解鏈接view 和model；

2：viewmodel通過雙向數(shù)據綁定把view和model聯(lián)系起來了；不需要手動的操作dom；維護復雜的數(shù)據只需要mvvm就可以了；

?

三：什么是雙向數(shù)據綁定；

1：vue實現(xiàn)雙向數(shù)據綁定主要是通過：數(shù)據劫持結合發(fā)布者-訂閱者的方式；通過defidended-property()方法來劫持每個屬性的setter、getter，數(shù)據變動時發(fā)布給訂閱者，觸發(fā)相應的回調。把一個普通的js對象傳給VUE實例來作為他的data選項時候，vue實例遍歷它的屬性用Object.definedproperty將他們轉換成setter、gettter；但是內部VUE追蹤依賴，當屬性訪問和修改時通知變化；

vue的雙向數(shù)據綁定將mvvm作為入口，整合Observer、complie，watcher，三者，通過Observerl監(jiān)聽model的改變，通過compile來編譯模板指令，最終利用watcher 搭起observer和compile之間的橋梁；達到數(shù)據變化，視圖更新；視圖變化，達到改變model變化；

?

四：vue生命周期；

從創(chuàng)建到銷毀的過程，稱為生命周期；

作用：生命周期中有很多鉤子，能夠利用鉤子事件控制整個vue實例過程中更容易形成好的邏輯；

第一次加載觸發(fā)哪幾個鉤子：

beforeCreate created beforeMounted Mounted

DOM渲染在mounted中渲染完成；

1>：創(chuàng)建前/后

2>：掛載前/后

3>：更新前/后

4>：銷毀錢/后

4.1：Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？

Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序可以歸類為以下 4 部分：

• 加載渲染過程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子組件更新過程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父組件更新過程

父 beforeUpdate -> 父 updated

• 銷毀過程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

五：VUE組件之間的傳值

1：父組件向子組件傳值：父組件中引入子組件，父組件定義要傳的值，子組件通過定義Prop來接收傳值，

2：子組件向父組件傳值：在父組件中定義一個方法接收子組件傳值，在子組件中定義一個觸發(fā)事件，通過$emit發(fā)射給子組件。

組件之間的傳值：當項目比較小的時候，使用中心

3：兄弟組件之間的傳值

1>：兄弟組件之間的傳值需要借助事件車；

2>：穿件一個VUE實例，讓兄弟兩個公用一個事件機制；

3>：數(shù)據傳遞方：使用Bus.$emit(方法名，傳遞數(shù)據)

數(shù)據接收方：通過mounted(){}觸發(fā)Bus.$on(方法名，Function(接收數(shù)據的參數(shù)){})

?

六：Vue路由鉤子函數(shù)；

首頁可以控制導航跳轉，beforeEach afterEach 等，一般用于修改頁面跳轉。

beforeEach(from ,to,next){}

to:route即將進入的目標路由；

from:route即將離開的路由；

next:function一定調用該方法，resolve這個鉤子，執(zhí)行效果依賴next的參數(shù)，可以控制網頁跳轉；

?

七：VUEX是什么，怎么使用，哪些場景可以使用；

1：vue單頁面組件的開發(fā)中的全局狀態(tài)管理。簡單的理解就是在store.js中定義一個數(shù)據之后，在全局任何一個組件中都可以獲取，修改，并且修改之后立刻能夠更新到全局。

?

1>:state:讀取狀態(tài)數(shù)據都保存在state中，是store中的唯一數(shù)據源；

?

// 定義 new Vuex.Store({ state: { allProducts: [] } //... }) // 組件中獲取 this.$store.state.allProducts

?

2>:moutation：改變state中數(shù)據的唯一途徑，不能處理異步數(shù)據。（重點）

?

mutations: { setProducts (state, products) { state.allProducts = products } } // 組件中使用 this.$store.commit('setProducts', {//..options})

?

3>:getters：和vue中的computed 類似，屬于計算屬性，基于state第二次包裝，常用于多個數(shù)據的篩選和相關計算；

?

getters: { cartProducts(state, getters, rootState) => (getters.allProducts.filter(p => p.quantity)) } // 組件中獲取 this.$store.getters.cartProducts

?

4>:actions：類似moutation，用于提交matation中狀態(tài)的改變，但是他不能直接改變moutation中的值；可以包含異步操作；

?

// 定義（shop為api） actions: { getAllProducts ({ commit }, payload) { shop.getProducts((res) => { commit('setProducts', res) }) } } // 組件中使用 this.$store.dispatch('getAllProducts', {//..payload})

?

5>:modules：類似于命名空間，將各個組件之間的變量分開操作和定義，便于維護

// 定義 const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) // 組件中使用 store.state.a // -> moduleA 的狀態(tài) store.state.b // -> moduleB 的狀態(tài)

?

八：VUE-cli如何新增自定義指令；

1.創(chuàng)建局部指令

var app = New Vue({ el:'#app', data:{} //創(chuàng)建指令，可以多個 directives() { inserted(el) { // 指令中第一個參數(shù)是當前使用指令的DOM console.log(el); console.log(arguments); // 對DOM進行操作 el.style.width = '200px'; el.style.height = '200px'; el.style.background = '#000'; } } })

?

2:全局指令

directive（dir2，{ innserted(el){ console.log(el); } }）

?

3:指令的使用

<div id="app"> <div v-dir1></div> <div v-dir2></div> </div>

?

九：VU如何定義一個過濾器；

1：html代碼：

<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }} </div>

?

2：JS代碼；

var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

?

3：定義全局過濾：

vue.filter('capitalize:': ,{function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

過濾器接收表達式的值 (msg) 作為第一個參數(shù)。capitalize 過濾器將會收到 msg的值作為第一個參數(shù)。

?

十：對VUEkeep-live 的理解？

keep-alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優(yōu)先級大于include)?

<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 該組件是否緩存取決于include和exclude屬性 --> </component> </keep-alive>

參數(shù)解釋

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

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

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

<keep-alive include="a,b"> <component></component> </keep-alive> <!-- 正則表達式 (需要使用 v-bind，符合匹配規(guī)則的都會被緩存) --> <keep-alive :include="/a|b/"> <component></component> </keep-alive> <!-- Array (需要使用 v-bind，被包含的都會被緩存) --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>

?

阿龍學堂整理發(fā)布：www.alongxuetang.com

總結

以上是生活随笔為你收集整理的阿龙学堂-VUE面试总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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