前言
接上篇前端Js筆試題面試題，收集整理Vue相關的面試題，供自己現在和以后學習和面試，也希望能對點進來的小伙伴有所幫助。
目錄：
前端HTML+CSS筆試題面試題
前端JS筆試題面試題
前端小程序筆試題面試題
Vue基礎必備
1、v-show 與v-if區別
1、v-show是css切換，v-if是完整的銷毀和重新創建。
2、使用 頻繁切換時用v-show，運行時較少改變時用v-if
3、v-if=‘false’ v-if是條件渲染，當false的時候不會渲染
2、Class 與 Style 如何動態綁定？
<b>Class</b>
1、對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
2、數組方法 v-bind:class="[class1, class2]"
3、行內 v-bind:style="{color: color, fontSize: fontSize+'px'}"
<b>Stlye</b>
1、對象方法 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2、數組方法 v-bind:style="[styleColor,styleSize]"
3、計算屬性和 watch 的區別
computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算computed 的值；
watch： 更多的是「觀察」的作用，類似于某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行后續操作；
運用場景：
1、當我們需要進行數值計算，并且依賴于其它數據時，應該使用 computed，因為可以利用 computed的緩存特性，避免每次獲取值時，都要重新計算；
2、當我們需要在數據變化時執行異步或開銷較大的操作時，應該使用watch，使用watch選項允許我們執行異步操作 ( 訪問一個API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。
4、事件修飾符
.prevent: 提交時間不再重載頁面
.stop:阻止單擊事件冒泡
.self:當事件發生在該元素本身而不是子元素的時候觸發
.capture:事件偵聽，事件發生的時候會調用
組合鍵 click.ctrl.exact 只有ctrl被按下的時候才觸發
5、組件中data為什么是函數
因為組件是用來復用的，JS 里對象是引用關系，這樣作用域沒有隔離，而new Vue 的實例，是不會被復用的，因此不存在引用對象的問題。
6、開發中常用的指令有哪些
v-model :一般用在表達輸入，很輕松的實現表單控件和數據的雙向綁定
v-html:更新元素的 innerHTML
v-show與v-if: 條件渲染,
v-on : click: 可以簡寫為@click,@綁定一個事件。如果事件觸發了，就可以指定事件的處理函數
v-for:基于源數據多次渲染元素或模板塊
v-bind: 當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM
7、v-model 的原理
vue 項目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創建雙向數據綁定，我們知道 v-model 本質上不過是語法糖， v-model在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：
1、text 和 textarea元素使用 value 屬性和 input事件；
2、checkbox 和 radio 使用 checked 屬性和 change 事件；
3、select字段將value 作為 prop 并將 change 作為事件;
8、vue插槽
單個插槽
當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標簽本身
命名插槽
solt元素可以用一個特殊的特性name來進一步配置如何分發內容。多個插槽可以有不同的名字。 這樣可以將父組件模板中slot位置，和子組件 slot元素產生關聯，便于插槽內容對應傳遞
作用域插槽
可以訪問組件內部數據的可復用插槽(reusable slot)在父級中，具有特殊特性 slot-scope 的<template> 元素必須存在，表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的prop 對象
9、組件之間的傳值通信
1、父組件給子組件傳值
使用
props，父組件可以使用props向子組件傳遞數據
2、子組件向父組件通信
父組件向子組件傳遞事件方法，子組件通過
$emit觸發事件，回調給父組件
3、非父子，兄弟組件之間通信
可以通過實例一個
vue實例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，然后通過分別調用Bus事件觸發($emit)和監聽($on)來實現通信和參數傳遞
10、對keep-alive的了解
keep-alive是一個內置組件，可使被包含的組件保留狀態或避免重新渲染，有include（包含的組件緩存）和exclude（排除的組件不緩存）兩個屬性。
對應兩個鉤子函數 activated 和 deactivated ，當組件被激活時，觸發鉤子函數 activated，當組件被移除時，觸發鉤子函數 deactivated。
11、 Vue computed 實現
1、建立與其他屬性（如：data、 Store）的聯系；
2、屬性改變后，通知計算屬性重新計算
Vue生命周期
12、請詳細說下你對vue生命周期的理解
生命周期共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后
創建前后 beforeCreate/created
在beforeCreate階段，vue實例的掛載元素el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象有了，el還沒有。
<font color='red'>載入前后 beforeMount/mounted</font>
在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前未虛擬的DOM節點，data尚未替換。在mounted階段，vue實例掛載完成，data成功渲染。
更新前后beforeUpdate/updated
當data變化時，會觸發beforeUpdate和updated方法。這兩個不常用，不推薦使用。
銷毀前后beforeDestory/destoryed
beforeDestory是在vue實例銷毀前觸發，一般在這里要通過removeEventListener解除手動綁定的事件。實例銷毀后，觸發的destroyed。
生命周期的作用？
生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程中更容易形成好的邏輯。
13、請列舉出3個Vue中常用的生命周期鉤子函數?
created:實例已經創建完成之后調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, $el屬性目前還不可見
mounted: el被新創建的 vm.\$el 替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted被調用時vm.$el也在文檔內。
activated: keep-alive組件激活時調用
14、Vue 的父組件和子組件生命周期鉤子函數執行順序？
Vue的父組件和子組件生命周期鉤子函數執行順序可以歸類為以下 4 部分：
加載渲染過程
父 beforeCreate -> 父 created-> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子組件更新過程
父beforeUpdate-> 子 beforeUpdate -> 子 updated-> 父 updated
父組件更新過程
父beforeUpdate -> 父 updated
銷毀過程
父beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
15、在什么階段才能訪問操作DOM？
在鉤子函數 mounted 被調用前，Vue 已經將編譯好的模板掛載到頁面上，所以在 mounted 中可以訪問操作 DOM。
16、在哪個生命周期內調用異步請求？
可以在鉤子函數 created、beforeMount、mounted中進行調用，因為在這三個鉤子函數中，data 已經創建，可以將服務端端返回的數據進行賦值。但是本人推薦在created 鉤子函數中調用異步請求，因為在 created 鉤子函數中調用異步請求有以下優點：
1、能更快獲取到服務端數據，減少頁面loading 時間
2、ssr不支持beforeMount 、mounted鉤子函數，所以放在 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運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式.
18、路由的跳轉方式
一般有兩種
1、聲明式（標簽跳轉）
\<router-link to='home'></router-link>標簽會渲染<a>標簽，在template中的跳轉都是這種；
2、編程式（ js跳轉）
另一種是編程是導航 也就是通過js跳轉 比如router.push('/home')
19、路由原理
前端路由實現起來其實很簡單，本質就是監聽
URL的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現方式
1、hash 模式
2、history 模式
www.test.com/##/ 就是 Hash URL，當##后面的哈希值發生變化時，不會向服務器請求數據，可以通過hashchange事件來監聽到URL的變化，從而進行跳轉頁面。
History模式是HTML5新推出的功能，比之Hash URL更加美觀
20、Vue的路由實現：hash模式 和 history模式
1、hash模式: 在瀏覽器中符號#，#以及#后面的字符稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。
2、history模式： history采用HTML5的新特性；且提供了兩個新方法：pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更
21、vue路由的鉤子函數
首頁可以控制導航跳轉，
beforeEach，afterEach等，一般用于頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to，from，next
to：route即將進入的目標路由對象。
from：route當前導航正要離開的路由。
next：function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉
22、$route和$router的區別
$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。
而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等
23、vue-router怎么定義動態路由？怎么獲取傳過來的動態參數？
定義：path:'a/:value' 獲取：this.$route.params.value。
Vuex
23、Vuex的工作流程，以及它的作用，使用場景。
vuex的工作流程：
1、在vue組件里面，通過dispatch來觸發actions提交修改數據的操作。
2、然后再通過actions的commit來觸發mutations來修改數據。
3、mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心里面的數據狀態）里面的數據。
4、最后由store觸發每一個調用它的組件的更新
Vuex的作用：項目數據狀態的集中管理，復雜組件(如兄弟組件、遠房親戚組件)的數據通信問題。
24、vue 中 ajax 請求代碼應該寫在組件的methods中還是vuex 的action中
如果請求來的數據不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入 vuex的 state 里
如果被其他地方復用，請將請求放入 action 里，方便復用，并包裝成 promise 返回
25、vuex是什么？怎么使用？哪種功能場景使用它？
1、只用來讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事件； 異步邏輯應該封裝在action中。
2、在main.js引入store，注入。新建了一個目錄store，… export
3、場景有：單頁應用中，組件之間的狀態、音樂播放、登錄狀態、加入購物車
Vue其他相關
26、怎么快速定位哪個組件出現性能問題
用 timeline 工具。 大意是通過 timeline 來查看每個函數的調用時常，定位出哪個函數的問題，從而能判斷哪個組件出了問題
27、MVVM
MVVM 由以下三個內容組成
View：界面
Model：數據模型
ViewModel：作為橋梁負責溝通 View 和 Model
28、路由懶加載
為了提升頁面加載速度，實現按需加載，也就是當路由訪問時才加載對應組件，我們可以結合vue的異步組件和webpack的代碼分割功能來實現路由的懶加載。
{
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();
})
頁碼數無法正常顯示
場景：列表頁在跳到詳情或其他頁面后再返回列表頁，無法正常顯示對應頁數（頁碼數放在state中），但請求的數據時正常的;
解決方案：頁碼數、總頁數必須要在同一個對象中，否則當前頁碼數不能正常顯示
30、NextTick
nextTick可以讓我們在下次DOM 更新循環結束之后執行延遲回調，用于獲得更新后的 DOM
// 修改數據
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 })
