Vue面試中，經(jīng)常會(huì)被問到的面試題/Vue知識(shí)點(diǎn)整理
一、對(duì)于MVVM的理解？
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來。
二、Vue的生命周期
destroyed（銷毀后） 在實(shí)例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
答：它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯。
答：它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。
答：會(huì)觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted 。
答：DOM 渲染在 mounted 中就已經(jīng)完成了。
三、 Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）
四、Vue組件間的參數(shù)傳遞
子組件傳給父組件：$emit方法傳遞參數(shù)
五、Vue的路由實(shí)現(xiàn)：hash模式 和 history模式
六、Vue與Angular以及React的區(qū)別？
七、vue路由的鉤子函數(shù)
八、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？
場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)、音樂播放、登錄狀態(tài)、加入購(gòu)物車
const store = new Vuex.Store({ //store實(shí)例state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {context.commit('increment')}}})
項(xiàng)目特別復(fù)雜的時(shí)候，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }}const moduleB = {state: { ... },mutations: { ... },actions: { ... }}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB})
九、vue-cli如何新增自定義指令？
var app = new Vue({el: '#app',data: {},// 創(chuàng)建指令(可以多個(gè))directives: {// 指令名稱dir1: {inserted(el) {// 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOMconsole.log(el);console.log(arguments);// 對(duì)DOM進(jìn)行操作el.style.width = '200px';el.style.height = '200px';el.style.background = '#000';}}}})
Vue.directive('dir2', {inserted(el) {console.log(el);}})
十、vue如何自定義一個(gè)過濾器？
{{msg| capitalize }}
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)}}})
Vue.filter('capitalize', function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)})
十一、對(duì)keep-alive 的了解？
在vue 2.1.0 版本之后，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優(yōu)先級(jí)大于include) 。
include - 字符串或正則表達(dá)式，只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式，任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則或者是數(shù)組時(shí)，要記得使用v-bind 。
十二、一句話就能回答的面試題
答：在style標(biāo)簽中寫入scoped即可 例如：
答：v-if按照條件是否渲染，v-show是display的block或none；
答：$route是“路由信息對(duì)象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等。
答：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
答：.prevent: 提交事件不再重載頁(yè)面；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)；.capture: 事件偵聽，事件發(fā)生的時(shí)候會(huì)調(diào)用
答：可以
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。key的作用主要是為了高效的更新虛擬DOM。
答：在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰；②依賴于數(shù)據(jù)，數(shù)據(jù)更新，處理結(jié)果自動(dòng)更新；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時(shí)，直接寫計(jì)算屬性名即可；⑤常用的是getter方法，獲取數(shù)據(jù)，也可以使用set方法改變數(shù)據(jù)；⑥相較于methods，不管依賴的數(shù)據(jù)變不變，methods都會(huì)重新計(jì)算，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取，不會(huì)重新計(jì)算。
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM、數(shù)據(jù)驅(qū)動(dòng)、組件化、輕量、簡(jiǎn)潔、高效、快速、模塊友好。
缺點(diǎn)：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO，建議通過服務(wù)端來進(jìn)行渲染組件）；第一次加載首頁(yè)耗時(shí)相對(duì)長(zhǎng)一些；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)、后退。
答：在 router 目錄下的 index.js 文件中，對(duì) path 屬性加上 /:id，使用 router 對(duì)象的 params.id 獲取。
專注分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！
長(zhǎng)按關(guān)注"前端達(dá)人"
評(píng)論
圖片
表情