從前端學習到找一份合適的工作，大大小小的面試必不可少，所以我對中級前端面試題進行了初步整理，也方便自己查閱，也希望對小伙伴們有所幫助！

Vue

——————————————————————————————————————

vue生命周期

什么是Vue生命周期？

Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期

Vue生命周期的作用是什么？

它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯

Vue生命周期總共有幾個階段？

它可以總共分為8個階段：創建前/后, 載入前/后,更新前/后,銷毀前/銷毀后

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

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

DOM渲染在哪個周期中就已經完成？

DOM 渲染在 mounted 中就已經完成了

每個生命周期適合哪些場景？

生命周期鉤子的一些使用方法：

beforecreate : 可以在這加個loading事件，在加載實例時觸發

created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用

mounted : 掛載元素，獲取到DOM節點

updated : 如果對數據統一處理，在這里寫上相應函數

beforeDestroy : 可以做一個確認停止事件的確認框

nextTick : 更新數據后立即操作dom

v-show與v-if區別

v-show是css切換，v-if是完整的銷毀和重新創建

使用 頻繁切換時用v-show，運行時較少改變時用v-if

v-if=‘false’ v-if是條件渲染，當false的時候不會渲染

開發中常用的指令有哪些

v-model :一般用在表達輸入，很輕松的實現表單控件和數據的雙向綁定

v-html: 更新元素的 innerHTML

v-show 與 v-if: 條件渲染, 注意二者區別

使用了v-if的時候，如果值為false，那么頁面將不會有這個html標簽生成

v-show則是不管值為true還是false，html元素都會存在，只是CSS中的display顯示或隱藏

v-on : click: 可以簡寫為@click,@綁定一個事件。如果事件觸發了，就可以指定事件的處理函數 v-for:基于源數據多次渲染元素或模板塊 v-bind: 當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM

語法：v-bind:title="msg" 簡寫：:title="msg"

綁定class的數組用法

對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

數組方法 v-bind:class="[class1, class2]"

行內 v-bind:style="{color: color, fontSize: fontSize+'px' }"

組件之間的傳值通信

父組件給子組件傳值

使用props，父組件可以使用props向子組件傳遞數據

父組件vue模板father.vue

<template>

<child :msg="message"></child>

</template>

<script>

import child from './child.vue';export default {

components: {

child

},

data () {

return {

message: 'father message';

}

}

}

</script>

子組件vue模板child.vue:

<template>

<div>{{msg}}</div>

</template>

<script>export default {

props: {

msg: {

type: String,

required: true

}

}

}

</script>

子組件向父組件通信

父組件向子組件傳遞事件方法，子組件通過$emit觸發事件，回調給父組件

父組件vue模板father.vue:

<template>

<child @msgFunc="func"></child>

</template>

<script>

import child from './child.vue';export default {

components: {

child

},

methods: {

func (msg) {

console.log(msg);

}

}

}

</script>

子組件vue模板child.vue:

<template>

<button @click="handleClick">點我</button>

</template>

<script>export default {

props: {

msg: {

type: String,

required: true

}

},

methods () {

handleClick () {

//........

this.$emit('msgFunc');

}

}

}

</script>

非父子，兄弟組件之間通信

可以通過實例一個vue實例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，然后通過分別調用Bus事件觸發和監聽來實現通信和參數傳遞

Bus.js可以是這樣:

import Vue from 'vue'

export default new Vue()

在需要通信的組件都引入Bus.js:

<template>

<button @click="toBus">子組件傳給兄弟組件</button>

</template>

<script>

import Bus from '../common/js/bus.js'export default{

methods: {

toBus () {

Bus.$emit('on', '來自兄弟組件')

}

}

}

</script>

另一個組件也import Bus.js 在鉤子函數中監聽on事件

import Bus from '../common/js/bus.js'export default {

data() {

return {

message: ''

}

},

mounted() {

Bus.$on('on', (msg) => {

this.message = msg

})

}

}

路由跳轉方式

1，<router-link to='home'> router-link標簽會渲染為<a>標簽，咋填template中的跳轉都是這種；

2，另一種是編程是導航 也就是通過js跳轉 比如 router.push('/home')

MVVM

M - Model，Model 代表數據模型，也可以在 Model 中定義數據修改和操作的業務邏輯

V - View，View 代表 UI 組件，它負責將數據模型轉化為 UI 展現出來

VM - ViewModel，ViewModel 監聽模型數據的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步 View 和 Model 的對象，連接 Model 和 View

computed和watch有什么區別?

computed:

1. computed是計算屬性,也就是計算值,它更多用于計算值的場景

2. computed具有緩存性,computed的值在getter執行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調用對應的getter來計算

3. computed適用于計算比較消耗性能的計算場景

watch:

1. 更多的是「觀察」的作用,類似于某些數據的監聽回調,用于觀察props $emit或者本組件的值,當數據變化時來執行回調進行后續操作

2. 無緩存性，頁面重新渲染時值不變化也會執行

小結:

1. 當我們要進行數值計算,而且依賴于其他數據，那么把這個數據設計為computed

2. 如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化

key

key是為Vue中的vnode標記的唯一id，通過這個key，我們的diff操作可以 更準確、更快速

準確:

如果不加key,那么vue會選擇復用節點(Vue的就地更新策略),導致之前節點的狀態被保留下來，會產生一系列的bug

快速:

key的唯一性可以被Map數據結構充分利用

組件中的data為什么是函數？

為什么組件中的data必須是一個函數，然后return一個對象，而new Vue實例里，data可以直接是一個對象？

// datadata() {

return {

message: "子組件",

childName:this.name

}

}

// new Vue

new Vue({

el: '#app',

router,

template: '<App/>',

components: {App}

})

因為組件是用來復用的，JS里對象是引用關系，這樣作用域沒有隔離，而new Vue的實例，是不會被復用的，因此不存在引用對象問題

Class 與 Style 如何動態綁定？

Class 可以通過對象語法和數組語法進行動態綁定：

對象語法

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {

isActive: true,

hasError: false

}

數組語法

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

Style 也可以通過對象語法和數組語法進行動態綁定：

對象語法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {

activeColor: 'red',

fontSize: 30

}

數組語法

<div v-bind:style="[styleColor, styleSize]"></div>

data: {

styleColor: {

color: 'red'

},

styleSize:{

fontSize:'23px'

}

}

vue的單項數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解

額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告。子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件修改

有兩種常見的試圖改變一個 prop 的情形 :

這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用

在這種情況下，最好定義一個本地的 data 屬性并將這個 prop 用作其初始值：

props: ['initialCounter'],

data: function () {

return {

counter: this.initialCounter

}

}

這個 prop 以一種原始的值傳入且需要進行轉換

在這種情況下，最好使用這個 prop 的值來定義一個計算屬性

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

keep-alive

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，避免重新渲染 ，其有以下特性：

一般結合路由和動態組件一起使用，用于緩存組件；

提供 include 和 exclude 屬性，兩者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存，exclude 表示任何名稱匹配的組件都不會被緩存 ，其中 exclude 的優先級比 include 高；

對應兩個鉤子函數 activated 和 deactivated ，當組件被激活時，觸發鉤子函數 activated，當組件被移除時，觸發鉤子函數 deactivated。

v-model 的原理

vue 項目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創建雙向數據綁定，我們知道 v-model 本質上不過是語法糖，v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；

checkbox 和 radio 使用 checked 屬性和 change 事件；

select 字段將 value 作為 prop 并將 change 作為事件;

以 input 表單元素為例：

<input v-model='something'>

相當于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定義組件中，v-model 默認會利用名為 value 的 prop 和名為 input 的事件，如下所示：

父組件：

<ModelChild v-model="message"></ModelChild>

子組件：

<div>{{value}}</div>

props:{

value: String

},

methods: {

test1(){

this.$emit('input', '小紅')

},

},

nextTick()

在下次DOM更新循環結束之后執行延遲回調。在修改數據之后，立即使用的這個回調函數，獲取更新后的DOM

// 修改數據

vm.msg = 'Hello'

// DOM 還未更新

Vue.nextTick(function () {

// DOM 更新

})

vue插槽

單個插槽

當子組件模板只有一個沒有屬性的插槽時，

父組件傳入的整個內容片段將插入到插槽所在的 DOM 位置，

并替換掉插槽標簽本身

命名插槽

solt元素可以用一個特殊的特性name來進一步配置如何分發內容。

多個插槽可以有不同的名字。 這樣可以將父組件模板中 slot 位置，

和子組件 slot 元素產生關聯，便于插槽內容對應傳遞

作用域插槽

可以訪問組件內部數據的可復用插槽(reusable slot)

在父級中，具有特殊特性 slot-scope 的<template> 元素必須存在，

表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，

此變量接收從子組件傳遞過來的 prop 對象

vue-router有哪幾種導航鉤子

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

第二種：組件內的鉤子

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

vuex

vuex是什么？

vuex 就是一個倉庫，倉庫里放了很多對象。其中 state 就是數據源存放地，對應于一般 vue 對象里面的 data

state 里面存放的數據是響應式的，vue 組件從 store 讀取數據，若是 store 中的數據發生改變，依賴這相數據的組件也會發生更新

它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性

Vuex有5種屬性: 分別是 state、getter、mutation、action、module;

state

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

mutations

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

getters

類似vue的計算屬性，主要用來過濾一些數據

action

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

總結

vuex 一般用于中大型 web 單頁應用中對應用的狀態進行管理，對于一些組件間關系較為簡單的小型應用，使用 vuex 的必要性不是很大，因為完全可以用組件 prop 屬性或者事件來完成父子組件之間的通信，vuex 更多地用于解決跨組件通信以及作為數據中心集中式存儲數據

你有對 Vue 項目進行哪些優化？

代碼層面的優化

v-if 和 v-show 區分使用場景

computed 和 watch 區分使用場景

v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if

長列表性能優化

事件的銷毀

圖片資源懶加載

路由懶加載

第三方插件的按需引入

優化無限列表性能

服務端渲染 SSR or 預渲染

Webpack 層面的優化

Webpack 對圖片進行壓縮

減少 ES6 轉為 ES5 的冗余代碼

提取公共代碼

模板預編譯

提取組件的 CSS

優化 SourceMap

構建結果輸出分析

Vue 項目的編譯優化

基礎的 Web 技術的優化

開啟 gzip 壓縮

瀏覽器緩存

CDN 的使用

使用 Chrome Performance 查找性能瓶頸

上一篇

千鋒長沙前端培訓分享之初級前端面試題整理

下一篇

千鋒長沙前端培訓分享之高級前端面試題整理