前言

接上篇前端Js筆試題面試題是钥，收集整理Vue相關的面試題鳖宾，供自己現(xiàn)在和以后學習和面試瑞信，也希望能對點進來的小伙伴有所幫助。

目錄：

前端HTML+CSS筆試題面試題

前端JS筆試題面試題

前端小程序筆試題面試題

Vue基礎必備

1绩鸣、v-show 與v-if區(qū)別

1怀大、v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建呀闻。

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

3捡多、v-if=‘false’ v-if是條件渲染蓖康，當false的時候不會渲染

2、Class 與 Style 如何動態(tài)綁定垒手？

<b>Class</b>

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

2、數(shù)組方法 v-bind:class="[class1, class2]"

3科贬、行內(nèi) v-bind:style="{color: color, fontSize: fontSize+'px'}"

<b>Stlye</b>

1泳梆、對象方法 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

2、數(shù)組方法 v-bind:style="[styleColor,styleSize]"

3榜掌、計算屬性和 watch 的區(qū)別

computed： 是計算屬性优妙，依賴其它屬性值，并且 computed 的值有緩存憎账，只有它依賴的屬性值發(fā)生改變套硼，下一次獲取 computed 的值時才會重新計算computed 的值；

watch： 更多的是「觀察」的作用胞皱，類似于某些數(shù)據(jù)的監(jiān)聽回調 熟菲，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調進行后續(xù)操作看政；

運用場景：

1朴恳、當我們需要進行數(shù)值計算抄罕，并且依賴于其它數(shù)據(jù)時，應該使用 computed于颖，因為可以利用 computed的緩存特性呆贿，避免每次獲取值時，都要重新計算森渐；

2做入、當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應該使用watch同衣，使用watch選項允許我們執(zhí)行異步操作 ( 訪問一個API)竟块，限制我們執(zhí)行該操作的頻率，并在我們得到最終結果前耐齐，設置中間狀態(tài)浪秘。這些都是計算屬性無法做到的。

4埠况、事件修飾符

.prevent: 提交時間不再重載頁面

.stop:阻止單擊事件冒泡

.self:當事件發(fā)生在該元素本身而不是子元素的時候觸發(fā)

.capture:事件偵聽耸携，事件發(fā)生的時候會調用

組合鍵 click.ctrl.exact 只有ctrl被按下的時候才觸發(fā)

5、組件中data為什么是函數(shù)

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

6壁榕、開發(fā)中常用的指令有哪些

v-model :一般用在表達輸入矛紫，很輕松的實現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

v-html:更新元素的 innerHTML

v-show與v-if: 條件渲染,

v-on : click: 可以簡寫為@click,@綁定一個事件。如果事件觸發(fā)了护桦，就可以指定事件的處理函數(shù)

v-for:基于源數(shù)據(jù)多次渲染元素或模板塊

v-bind: 當表達式的值改變時含衔，將其產(chǎn)生的連帶影響，響應式地作用于 DOM

7二庵、v-model 的原理

vue 項目中主要使用 v-model 指令在表單 input贪染、textarea、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定催享，我們知道 v-model 本質上不過是語法糖杭隙， v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

1、text 和 textarea元素使用 value 屬性和 input事件因妙；

2痰憎、checkbox 和 radio 使用 checked 屬性和 change 事件票髓；

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

8铣耘、vue插槽

單個插槽

當子組件模板只有一個沒有屬性的插槽時洽沟，父組件傳入的整個內(nèi)容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標簽本身

命名插槽

solt元素可以用一個特殊的特性name來進一步配置如何分發(fā)內(nèi)容蜗细。多個插槽可以有不同的名字裆操。 這樣可以將父組件模板中slot位置，和子組件 slot元素產(chǎn)生關聯(lián)炉媒，便于插槽內(nèi)容對應傳遞

作用域插槽

可以訪問組件內(nèi)部數(shù)據(jù)的可復用插槽(reusable slot)在父級中踪区，具有特殊特性 slot-scope 的<template> 元素必須存在，表示它是作用域插槽的模板吊骤。slot-scope 的值將被用作一個臨時變量名缎岗，此變量接收從子組件傳遞過來的prop 對象

9、組件之間的傳值通信

1白粉、父組件給子組件傳值

使用props传泊，父組件可以使用props向子組件傳遞數(shù)據(jù)

2、子組件向父組件通信

父組件向子組件傳遞事件方法蜗元，子組件通過$emit觸發(fā)事件或渤，回調給父組件

3、非父子奕扣，兄弟組件之間通信

可以通過實例一個vue實例Bus作為媒介薪鹦，要相互通信的兄弟組件之中，都引入Bus惯豆，然后通過分別調用Bus事件觸發(fā)($emit)和監(jiān)聽($on)來實現(xiàn)通信和參數(shù)傳遞

10、對keep-alive的了解

keep-alive是一個內(nèi)置組件地熄，可使被包含的組件保留狀態(tài)或避免重新渲染芯杀，有include（包含的組件緩存）和exclude（排除的組件不緩存）兩個屬性端考。

對應兩個鉤子函數(shù) activated 和 deactivated ，當組件被激活時揭厚，觸發(fā)鉤子函數(shù) activated筛圆，當組件被移除時裂明，觸發(fā)鉤子函數(shù) deactivated。

11太援、 Vue computed 實現(xiàn)

1闽晦、建立與其他屬性（如：data、 Store）的聯(lián)系笋敞；

2捅儒、屬性改變后，通知計算屬性重新計算

Vue生命周期

12、請詳細說下你對vue生命周期的理解

生命周期共分為8個階段創(chuàng)建前/后坊秸，載入前/后褒搔，更新前/后，銷毀前/后

創(chuàng)建前后 beforeCreate/created

在beforeCreate階段走孽，vue實例的掛載元素el和數(shù)據(jù)對象data都為undefined琳状，還未初始化。在created階段困食，vue實例的數(shù)據(jù)對象有了翎承，el還沒有叨咖。

<font color='red'>載入前后 beforeMount/mounted</font>

在beforeMount階段，vue實例的$el和data都初始化了甸各，但還是掛載之前未虛擬的DOM節(jié)點痴晦，data尚未替換。在mounted階段部凑，vue實例掛載完成，data成功渲染瘟仿。

更新前后beforeUpdate/updated

當data變化時比勉，會觸發(fā)beforeUpdate和updated方法。這兩個不常用观蜗，不推薦使用衣洁。

銷毀前后beforeDestory/destoryed

beforeDestory是在vue實例銷毀前觸發(fā)坊夫，一般在這里要通過removeEventListener解除手動綁定的事件。實例銷毀后梧兼，觸發(fā)的destroyed智听。

生命周期的作用？

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

13悔雹、請列舉出3個Vue中常用的生命周期鉤子函數(shù)?

created:實例已經(jīng)創(chuàng)建完成之后調用,在這一步,實例已經(jīng)完成數(shù)據(jù)觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, $el屬性目前還不可見

mounted: el被新創(chuàng)建的 vm.\$el 替換，并掛載到實例上去之后調用該鉤子梯找。如果 root 實例掛載了一個文檔內(nèi)元素益涧，當 mounted被調用時vm.$el也在文檔內(nèi)。

activated: keep-alive組件激活時調用

14浅辙、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

15呼巴、在什么階段才能訪問操作DOM？

在鉤子函數(shù) mounted 被調用前诊赊，Vue 已經(jīng)將編譯好的模板掛載到頁面上屑埋，所以在 mounted 中可以訪問操作 DOM摘能。

16敲街、在哪個生命周期內(nèi)調用異步請求？

可以在鉤子函數(shù) created逻恐、beforeMount峻黍、mounted中進行調用姆涩，因為在這三個鉤子函數(shù)中，data 已經(jīng)創(chuàng)建亏栈，可以將服務端端返回的數(shù)據(jù)進行賦值宏赘。但是本人推薦在created 鉤子函數(shù)中調用異步請求，因為在 created 鉤子函數(shù)中調用異步請求有以下優(yōu)點：

1闷游、能更快獲取到服務端數(shù)據(jù)脐往，減少頁面loading 時間

2、ssr不支持beforeMount 蛛碌、mounted鉤子函數(shù)辖源，所以放在 created 中有助于一致性

Vue-Router路由

17、vue-router 路由模式有幾種酝蜒？

vue-router 有 3 種路由模式：hash矾湃、history邀跃、abstract

1、hash: 使用 URL hash值來作路由途戒。支持所有瀏覽器僵驰，包括不支持 HTML5 History Api的瀏覽器

2蒜茴、history : 依賴 HTML5 History API和服務器配置。具體可以查看 HTML5 History 模式

3顽腾、abstract : 支持所有 JavaScript運行環(huán)境毡鉴，如 Node.js 服務器端猪瞬。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強制進入這個模式.

18幌甘、路由的跳轉方式

一般有兩種

1、聲明式（標簽跳轉）

\<router-link to='home'></router-link>標簽會渲染<a>標簽酥诽，在template中的跳轉都是這種皱埠；

2边器、編程式（ js跳轉）

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

19、路由原理

前端路由實現(xiàn)起來其實很簡單恒界，本質就是監(jiān)聽 URL 的變化砚嘴，然后匹配路由規(guī)則际长，顯示相應的頁面，并且無須刷新洋幻。目前單頁面使用的路由就只有兩種實現(xiàn)方式

1翅娶、hash 模式

2竭沫、history 模式

www.test.com/##/ 就是 Hash URL骑篙，當## 后面的哈希值發(fā)生變化時靶端，不會向服務器請求數(shù)據(jù)，可以通過 hashchange 事件來監(jiān)聽到 URL 的變化脏榆，從而進行跳轉頁面台谍。

History模式是HTML5新推出的功能，比之 Hash URL更加美觀

20坞生、Vue的路由實現(xiàn)：hash模式 和 history模式

1是己、hash模式: 在瀏覽器中符號#，#以及#后面的字符稱之為hash沛厨，用 window.location.hash 讀取升熊。特點：hash雖然在URL中级野，但不被包括在HTTP請求中；用來指導瀏覽器動作辰企，對服務端安全無用况鸣，hash不會重加載頁面。

2潜索、history模式： history采用HTML5的新特性懂酱；且提供了兩個新方法：pushState()列牺， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監(jiān)聽到狀態(tài)變更

21泌辫、vue路由的鉤子函數(shù)

首頁可以控制導航跳轉九默，beforeEach荤西，afterEach等伍俘，一般用于頁面title的修改癌瘾。一些需要登錄才能調整頁面的重定向功能饵溅。

beforeEach主要有3個參數(shù)to蜕企，from，next

to：route即將進入的目標路由對象幸乒。

from：route當前導航正要離開的路由罕扎。

next：function一定要調用該方法resolve這個鉤子丐重。執(zhí)行效果依賴next方法的調用參數(shù)扮惦。可以控制網(wǎng)頁的跳轉

22浊仆、$route和$router的區(qū)別

$route是“路由信息對象”豫领，包括path氏堤，params搏明，hash星著，query，fullPath同欠，matched铺遂，name等路由信息參數(shù)。
而$router是“路由實例”對象包括了路由的跳轉方法撤逢，鉤子函數(shù)等

23粮坞、vue-router怎么定義動態(tài)路由？怎么獲取傳過來的動態(tài)參數(shù)互例？

  定義：path:'a/:value' 獲润菽帧：this.$route.params.value丁存。

Vuex

23、Vuex的工作流程扩然，以及它的作用夫偶，使用場景觉增。

vuex的工作流程：

1逾礁、在vue組件里面，通過dispatch來觸發(fā)actions提交修改數(shù)據(jù)的操作腻扇。

2幼苛、然后再通過actions的commit來觸發(fā)mutations來修改數(shù)據(jù)焕刮。

3、mutations接收到commit的請求括荡，就會自動通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)一汽。

4召夹、最后由store觸發(fā)每一個調用它的組件的更新

Vuex的作用：項目數(shù)據(jù)狀態(tài)的集中管理，復雜組件(如兄弟組件纱意、遠房親戚組件)的數(shù)據(jù)通信問題偷霉。

24褐筛、vue 中 ajax 請求代碼應該寫在組件的methods中還是vuex 的action中

如果請求來的數(shù)據(jù)不是要被其他組件公用渔扎，僅僅在請求的組件內(nèi)使用，就不需要放入 vuex的 state 里

如果被其他地方復用残吩，請將請求放入 action 里泣侮，方便復用活尊，并包裝成 promise 返回

25漏益、vuex是什么遭庶？怎么使用稠屠？哪種功能場景使用它？

1煎谍、只用來讀取的狀態(tài)集中放在store中龙屉；改變狀態(tài)的方式是提交mutations转捕，這是個同步的事件五芝； 異步邏輯應該封裝在action中。

2沉删、在main.js引入store矾瑰，注入隘擎。新建了一個目錄store嵌屎，… export

3宝惰、場景有：單頁應用中，組件之間的狀態(tài)尊残、音樂播放寝衫、登錄狀態(tài)拐邪、加入購物車

Vue其他相關

26扎阶、怎么快速定位哪個組件出現(xiàn)性能問題

用 timeline 工具婶芭。 大意是通過 timeline 來查看每個函數(shù)的調用時常犀农，定位出哪個函數(shù)的問題呵哨，從而能判斷哪個組件出了問題

27轨奄、MVVM

MVVM 由以下三個內(nèi)容組成

View：界面

Model：數(shù)據(jù)模型

ViewModel：作為橋梁負責溝通 View 和 Model

28、路由懶加載

為了提升頁面加載速度戚绕，實現(xiàn)按需加載纹坐，也就是當路由訪問時才加載對應組件，我們可以結合vue的異步組件和webpack的代碼分割功能來實現(xiàn)路由的懶加載舞丛。

{
    path: '/iov/login',
    name: '登錄',
    component: resolve => require(['@/views/login/login'], resolve),
},
{
    path:'/iov/organization',
    name:'組織管理',
    component:() => import('@/views/enterprise/organization')
}

29耘子、elementUI

<b>表單彈窗中 elementform 清除驗證殘留提示</b>

給表單添加不同的 ref （REFNAME），如果有相同的ref 會導致殘留驗證提示清除失敗

    this.dialogTranspor = true
    //彈窗打開后 dom 沒有生成球切，所有要用 this.$nextTick
   
    this.$nextTick(function () {
     
        this.$refs.REFNAME.resetFields();

      })

頁碼數(shù)無法正常顯示

場景：列表頁在跳到詳情或其他頁面后再返回列表頁谷誓，無法正常顯示對應頁數(shù)（頁碼數(shù)放在state中），但請求的數(shù)據(jù)時正常的;

解決方案：頁碼數(shù)吨凑、總頁數(shù)必須要在同一個對象中，否則當前頁碼數(shù)不能正常顯示

30鸵钝、NextTick

nextTick可以讓我們在下次DOM 更新循環(huán)結束之后執(zhí)行延遲回調糙臼，用于獲得更新后的 DOM

// 修改數(shù)據(jù)
vm.msg = 'Hello'
// DOM 還未更新
Vue.nextTick(function () {
  // DOM 更新
})

31、指令v-el的作用是什么?

提供一個在頁面上已存在的 DOM元素作為 Vue實例的掛載目標.可以是 CSS 選擇器恩商，也可以是一個 HTMLElement 實例,

32变逃、在Vue中使用插件的步驟

采用ES6的import ... from ...語法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })