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