面試題（五）常見vue相關面試題總結

1.vue 優點

答：

• 輕量級框架：只關注檢視層，是一個構建資料的檢視集合，大小隻有幾十kb； 簡單易學：國人開發，中文文件，不存在語言障礙 ，易於理解和學習；
• 雙向資料繫結：保留了angular的特點，在資料操作方面更為簡單；
• 元件化：保留了react的優點，實現了html的封裝和重用，在構建單頁面應用方面有著獨特的優勢；
• 檢視，資料，結構分離：使資料的更改更為簡單，不需要進行邏輯程式碼的修改，只需要運算元據就能完成相關操作；
• 虛擬DOM：dom操作是非常耗費效能的， 不再使用原生的dom操作節點，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；
• 執行速度更快：相比較與react而言，同樣是操作虛擬dom，就效能而言，vue存在很大的優勢。

2.vue 父元件向子元件傳遞資料？
答：通過props
3.子元件像父元件傳遞事件
答：通過$emit方法
4.v-show 和 v-if 指令的共同點和不同點
答：
共同點：都能控制元素的顯示和隱藏
不同點：實現本質方法不同，v-show本質是通過控制css中的display設定為none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內新增或者刪除DOM元素，若初始值為false，就不會編譯了。而且v-if不停的銷燬和闖將比較消耗效能。
總結：如果要頻繁切換某節點，使用v-show（切換開銷比較小，初始開銷較大）。如果不需要頻繁切換某節點，使用v-if（初始渲染開銷較小，切換開銷比較大）。
5.如何讓 CSS 只在當前元件中起作用
答：在元件中的 style 前面加上 scoped <style lang="scss" scoped></style>
**6. keep-alive 的作用是什麼?
答：keep-alive是vue內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染。
7.如何獲取 dom
答：<form ref="domName"></form>
用法：this.$refs.domName
8.說出幾種 vue 當中的指令和它的用法？
答：v-model 雙向資料繫結
v-for 迴圈
v-if v-show 顯示與隱藏
9.vue-loader 是什麼？使用它的用途有哪些？
答：vue檔案的一個載入器，將 template/js/style轉換成js模組。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
10.為什麼使用 key
答：需要使用key來給每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點。
作用主要是為了高效的更新虛擬DOM
11.axios 及安裝
答：請求後臺資源的模組
安裝：npm install axios --save

// main.js
import axios from 'axios' // 引入
// 配置請求的根路徑
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

// 通過axios 請求攔截器 新增token 需要授權的 API ，必須在請求頭中使用 `Authorization` 欄位提供 `token` 令牌
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最後必須return config
  return config
})

// axios 響應攔截器
axios.interceptors.response.use(function (res) {
  return res.data
}, function (err) {
  console.log(err)
})

Vue.prototype.$http = axios // 掛載到vue例項上

// js中使用import進來，然後.get或.post。返回在.then函式中如果成功，失敗則是在.catch函式中。

// get delete方法傳參格式一樣用params
this.$http.get(`http://127.0.0.1:8888/api/private/v1/{$id}`,{params:{key:value}})
.then(res => {
	console.log(res)
})
.catch(err => {
	conosle.log(err)
})
// post put 方法傳參格式一致
this.$http.get(`http://127.0.0.1:8888/api/private/v1/{$id}`,{key:value})
.then(res => {
	console.log(res)
})
.catch(err => {
	conosle.log(err)
})

12.axios 解決跨域
答：vue-cli3.0中直接使用就可以解決跨域問題。
13.v-modal 的使用
答：v-model用於表單資料的雙向資料繫結，其實它就是一個語法糖，這個背後就做了兩個操作：
v-bind 繫結一個value屬性；
v-on指令給當前元素繫結input事件。
14.scss 的安裝以及使用
答：安裝： npm install sass-loader node-sass
也可以先安裝node-sass,再安裝sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
使用：無需配置，直接使用即可,單檔案中的引入和使用

<style lang="scss" scoped>
	@import "./styles/base.scss";
</style>

15.請說出 vue.cli 專案中 src 目錄每個資料夾和檔案的用法？
答：assets資料夾是放靜態資源；
components是放元件；
router是定義路由相關的配置；
app.vue是一個應用主元件；
main.js是入口檔案
16.分別簡述 computed 和 watch 的使用場景
答：computed：
當一個屬性受多個屬性影響的時候就需要用到computed
最典型的栗子：購物車商品結算的時候
watch：
當一條資料影響多條資料的時候就需要用到watch
栗子：搜說資料
17.v-on 可以監聽多個方法嗎
答：可以

<input type="text" v-on="{ input: onInput, focus: onFocus, blur: onBlur }"/>

18.$nextTick 的使用
答：當你修改了data的值然後馬上獲取這個dom元素的值，是不能獲取到更新後的值的，需要使用 $nextTick 這個回撥，讓修改後的data值在渲染更新到dom元素之後再獲取，才能成功。
19.vue 元件中 data 為什麼必須是一個函式
答：因為JavaSc的特性所導致，在component中，data必須以函式的形式存在，不可以是物件。
元件中的data寫成一個函式，資料以函式返回值的形式定義，這樣每次複用元件的時候，都會返回一份新的data，相當於每個元件例項都有自己的私有的資料空間，它們只負責各自維護的資料，不會造成混亂。而單純的寫成物件形式，就說所有的元件例項共用了一個data，這樣改一個全都改了。
20.vue 事件物件的使用
答： 函式形式
若引數採用函式形式，則事件偵聽器處理函式的第一個引數預設接收事件物件event，event物件將被自動當做實參傳入。注意，形參的名稱可以自定義。

<template>
	<button @click="handle">button</button>
</template>
<script>
export default{
	methods: {
		handle (event){
			console.log(event.target)
		}
	}
}
</script>

函式執行的形式
若引數採用函式執行的形式，則需要使用 $event 變數向事件偵聽器處理函式中顯示傳入event物件。注意，實參名稱即 $event 變數名不能自定義。

<template>
	<button @click="handle($event)">button</button>
</template>
<script>
export default{
	methods: {
		handle (event){
			console.log(event)
		}
	}
}
</script>

21 元件間的通訊
答：
父元件向子元件傳值： props
子元件向父元件傳值： $emit
狀態管理：vuex
22.漸進式框架的理解
答：主張最少；可以根據不同的需求選擇不同的層級；
23.Vue 中雙向資料繫結是如何實現的
答：vue 雙向資料繫結是通過 資料劫持 結合 釋出訂閱模式的方式來實現的，也就說資料和檢視同步，資料發生變化，檢視跟著變化，檢視變化，資料也隨之發生改變；
核心：關於VUE雙向資料繫結，其核心是 Object.defineProperty()方法。
24.單頁面應用和多頁面應用區別及優缺點
答：單頁面應用（SPA），通俗點說就是指只有一個主頁面的應用，瀏覽器一開始要載入所有必須的 html，js，css。所有的頁面內容都包含這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然後在互動的時候由路由程式動態載入，單頁面的頁面跳轉，僅重新整理區域性資源。多應用於pc端。
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁面重新整理
單頁面的優點：
使用者體驗好，快，內容的改變不需要重新載入整個頁面，基於這一點spa對伺服器壓力較小；前後端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。
單頁面缺點：
不利於seo；導航不可用，如果一定要導航，需要自行實現前進、後退。（由於是單頁面不能用瀏覽器的前進後退功能，所以需要自己建立堆疊管理）；初次載入時耗時多；頁面複雜度提高很多。
25.vue 中過濾器有什麼作用及詳解
答：過濾器是一個通過輸入資料，能夠及時對資料進行處理並返回一個資料結果的簡單函式。
首先定義過濾器有兩種方式，第一種是全域性過濾器，我們可以直接在vue物件上使用filter方法註冊過濾器，這種全域性註冊的過濾器在任何一個元件內都可以使用。第二種則是元件內部的過濾器，註冊元件內部過濾器則只能在當前元件內使用。

// 全域性過濾器

Vue.filter('formatTime', function (value) {
  const dt = new Date(value)
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${hh}:${mm}:${ss}`
})

<!-- 元件內的區域性過濾器 -->
<script>
export default{
	// ...
	filters: {
		formatDate(val){
			const dt = new Date(val)
  			const y = dt.getFullYear()
  			const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  			const d = (dt.getDate() + '').padStart(2, '0')
  			return `${y}-${m}-${d}`
		}
	}
}
</script>

<!-- 元件內使用 -->
<template>
<div>
	<h2>vue過濾器</h2>
	<!-- 區域性過濾器 -->
	<p>{{ 1533527037000 | formatDate }}</p>
	<!-- 全域性過濾器 -->
	<p>{{ 1533527037000 | formatTime }}</p>
	<!-- 過濾器可以串聯 -->
	<p>{{ message | filterA | filterB }}</p>
	<!-- 過濾器傳參 -->
	<p>{{ message | filterA('arg1', arg2) }}</p>
</div>
</template>
<script>
export default{
	// ...
}
</script>

26.v-if 和 v-for 的優先順序
答：當 v-if 和 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序，這就意味著 v-if 將分別重複執行於每個 v-for 迴圈中。所以，不推薦 v-if 和 v-for 同時使用。
如果 v-if 和 v-for 一起用的話，vue會自動提示 v-if 應該放到外層去。
27.assets 和 static 的區別
答：

相同點：
assets和static兩個都是存放靜態資原始檔。專案中所需要的資原始檔圖片，文字圖示，樣式檔案等都可以放在這兩個資料夾下。

不同點：
assets中存放的靜態資原始檔在專案打包時，也就是執行 npm run build 時會將assets中放置的靜態資原始檔進行打包上傳，所謂打包簡單點可以理解為壓縮體積，程式碼格式化。而壓縮後的靜態資原始檔最終都會放置在static檔案中跟著index.html一同上傳至伺服器。static中放置的靜態資原始檔就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至伺服器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資原始檔由於沒有進行壓縮等操作，所以檔案的體積也就相對於assets中打包後的檔案體積較大點。在伺服器中就會佔據更大的空間。

建議：
將專案中template需要的樣式檔案js檔案等都可以放置在assets中，走打包這一流程，減少體積。而專案中引入的第三方的資原始檔如iconfont.css等檔案可以放置在static中，因為這些引入的第三方檔案已經經過處理，我們不需要處理，直接上傳。
28.列舉常用的指令
答：
v-model 表單資料雙向繫結
v-if v-show 控制顯示隱藏
v-for 迴圈
v-bind 動態繫結屬性
v-on 繫結事件
29.vue 常用的修飾符
答：
v-model修飾符：
.lazy：輸入框改變，這個資料就會改變，lazy這個修飾符會在游標離開input框才會更新資料
.trim：過濾輸入框資料首位空格
.number：先輸入數字就會限制輸入只能是數字，先字串就相當於沒有加number，注意，不是輸入框不能輸入字串，是這個資料是數字。

事件修飾符：
.stop：等同於JavaScript中的event.stopPropagation()，阻止事件冒泡
.prevent：等同於JavaScript中的event.preventDefault()，阻止預設行為，比如表單的提交、a標籤的跳轉就是預設事件
.capture：與事件冒泡的方向相反，事件捕獲由外到內
.self：只會觸發自己範圍內的事件，不包含子元素
.once：只會觸發一次
30.陣列更新檢測
答：
由於JavaScript的限制，Vue不能檢測以下變動的陣列：

• 當利用索引直接賦值一個項時，例如: vm.items[indexOfItem] = newValue
• 當修改陣列的長度時，例如：vm.items.length = newLength

vue針對這兩個問題給出了響應的解決辦法，使用這兩種方法，也會觸發狀態更新：

• 使用vue全域性方法 Vue.set()或者使用 vm.$set() 例項方法
• 使用 splice concat 等修改陣列

vue能不能檢測到陣列的變化並更新，取決於原生js的陣列方法，如果原生js方法（vue變異方法）能夠修改原陣列，那麼vue就可以檢測到變化並更新（例如：push，pop，shift， unshift， splice，sort ，reverse等方法）
如果原生js方法（vue非變異方法）不能夠修改原陣列，而是返回一個新陣列，那麼vue也可以檢測到變化並更新，前提是使用這些方法時要把新陣列返回出來去替換掉舊陣列（例如：filer()，concat()，slice()等方法）

31.Vue.set 檢視更新
答：

32.自定義指令詳解
答：自定義指令
33.vue 的兩個核心點
答：資料驅動、元件系統
資料驅動：ViewModel，保證資料和檢視的一致性
元件系統：應用類UI可以看作全部是由元件樹構成的
34.vue 和 jQuery 的區別
答：jQuery是使用選擇器（$）選取DOM物件，對其進行賦值、取值、事件繫結等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM物件，而資料和介面是一起的。比如需要獲取label標籤的內容：$("label").val() 它還剩依賴DOM元素的值。
Vue則是通過Vue物件將資料和View完全分離開來了。對資料進行操作不再需要引用相應的DOM物件，可以說資料和View是分離的，它們通過Vue物件這個vm實現相互的繫結。這就是傳說中的MVVM。
35 引進元件的步驟
答：

<template>
	<!-- 3.在template中使用元件 -->
	<m-header></m-header>
</template>
<script>
import MHeader from '@/components/m-header/index' // 1.在script的第一行用import引入路徑

export default{
	// ...
	components: {
		MHeader  // 2.在components中寫上元件名稱
	}
}
</script>

36.Vue-cli 打包命令是什麼？打包後會導致路徑問題，應該在哪裡修改
答：打包命令是 npm run build
執行命令後，打包生成dist資料夾，訪問的時候報錯。
解決方法：

// 在根目錄下，新建 vue.config.js檔案，內容如下 @ 指根目錄src 再次執行打包命令
module.exports = {
	publicPath:'./', 
	configureWebpack:{
		resolve: { 
			alias: { 
				'assets': '@/assets', 
				'common': '@/common',
			 	'components': '@/components', 
			 	'views': '@/views', 
			 	'plugins': '@/plugins'
			  } 
		}
	} 
}

37.三大框架的對比

	Angular	React	Vue
組織方式	MVC	模組化	MVVM
資料繫結	雙向繫結	單向繫結	雙向繫結
模板能力	強大	自由	自由
自由度	較小	大	較大
路由	靜態路由	動態路由	動態路由

Vue.js是一個構建資料驅動的Web介面的庫。
Vue.js通過簡單的API（應用程式程式設計介面）提供高效的資料繫結和靈活的元件系統。
Vue.js的特性如下：

1. 輕量級的框架
2. 雙向資料繫結
3. 指令
4. 外掛化

與AngularJS的區別

相同點：

都支援指令：內建指令和自定義指令。

都支援過濾器：內建過濾器和自定義過濾器。

都支援雙向資料繫結。

都不支援低端瀏覽器。

不同點：

1.AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。
2.在效能上，AngularJS依賴對資料做髒檢查，所以Watcher越多越慢。
Vue.js使用基於依賴追蹤的觀察並且使用非同步佇列更新。所有的資料都是獨立觸發的。
對於龐大的應用來說，這個優化差異還是比較明顯的。

與React的區別

相同點：

React採用特殊的JSX語法，Vue.js在元件開發中也推崇編寫.vue特殊檔案格式，對檔案內容都有一些約定，兩者都需要編譯後使用。
中心思想相同：一切都是元件，元件例項之間可以巢狀。
都提供合理的鉤子函式，可以讓開發者定製化地去處理需求。
都不內建列數AJAX，Route等功能到核心包，而是以外掛的方式載入。
在元件開發中都支援mixins的特性。
不同點：
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果做髒檢查。
Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。

38.跨元件雙向資料繫結
答：通過 this.$emit('input')修改最終的值，這是封裝元件的關鍵所在：統一資料來源。
39.delete 和 Vue.delete 刪除陣列的區別
答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還剩不變。
Vue.delete 直接刪除了陣列，百變了陣列的鍵值。
40.SPA 首屏載入慢如何解決
答：安裝動態懶載入所需外掛；使用CDN資源。
41.Vue-router 跳轉和 location.href 有什麼區別
答：使用 location.href=’/url’來跳轉，簡單方便，但是重新整理了頁面；
使用 history.pushState(’/url’)，無重新整理頁面，靜態跳轉；
引進router，然後使用router.push(’/url’)來跳轉，使用了diff演算法，實現了按需載入，減少了dom的消耗。
其實使用router跳轉和使用history.pushState()沒什麼差別的，因為vue-router就是用了history.pushState()，尤其是在history模式下。
42.vue slot
答：簡單來說，假如父元件需要在子元件內放一些DOM，那麼這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示、如何顯示，就是slot分發負責的活。
43.你們 vue 專案是打包了一個 js 檔案，一個 css 檔案，還是有多個檔案？
答：根據vue-cli腳手架規範，一個js檔案，一個css檔案。
44.vue 遇到的坑，如何解決的？
45.Vue 裡面 router-link 在電腦上有用，在安卓上沒反應怎麼解決？
答：Vue路由在Android機上有問題，babel問題，安裝babel polypill外掛解決。
46.Vue2 中註冊在 router-link 上事件無效解決方法
答：使用@click.native。原因：router-link會阻止click事件， .native指直接監聽一個原生事件。
47.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳轉）的問題
答：方法一：只用a標籤，不適用button標籤；
方法二：使用button標籤和Router.navigate方法
48.axios 的特點有哪些
答：從瀏覽器中建立XMLHttpRequests；
node.js建立http請求；
支援Promise API；
攔截請求和響應；
轉換請求資料和響應資料；
取消請求；
自動轉換成json
axios中的傳送欄位的引數是data跟params兩個，兩者的區別在於params是跟請求地址一起傳送的，data的作為一個請求體進行傳送
params一般適用於get請求，data一般適用於post put請求。
49.請說下封裝 vue 元件的過程？
答：1. 建立元件的模板，先把架子搭起來，寫寫樣式，考慮好元件的基本邏輯。
2.準備好元件的資料輸入。即分析好邏輯，定好 props 裡面的資料、型別。
3. 準備好陣列的資料輸出。即根據元件邏輯，做好要暴露出來的方法。
4. 封裝完畢，直接呼叫即可。
50.vue 各種元件通訊方法（父子 子父 兄弟 爺孫 毫無關係的元件）
51.params 和 query 的區別
答：用法：
query要用path來引入，params要用name來引入，接收引數都是類似的，分別是 this.$route.query.name 和 this.$route.params.name。
url地址顯示：query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器位址列中顯示引數，後者則不顯示
注意：query重新整理不會丟失query裡面的資料
params重新整理會丟失params裡面的資料。
52.vue mock 資料
53 vue 封裝通用元件
54.vue 初始化頁面閃動問題
答：使用vue開發時，在vue初始化之前，由於div是不歸vue管的，所以我們寫的程式碼在還沒有解析的情況下會容易出現花屏現象，看到類似於{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。

<div id="app" v-cloak>
    {{context}}
</div>
<style>
[v-cloak] {
	display: none;
}
</style>

在簡單專案中，使用 v-cloak 指令是解決螢幕閃動的好方法。但在大型、工程化的專案中（webpack、vue-router）只有一個空的 div 元素，元素中的內容是通過路由掛載來實現的，這時我們就不需要用到 v-cloak 指令了。
55.vue 禁止彈窗後的螢幕滾動
答：vue彈窗遮蔽滑動的兩種解決方案
56.vue 更新陣列時觸發檢視更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
57.vue 常用的 UI 元件庫
答：Mint UI，element，VUX
58.vue 如何引進本地圖片
答：兩種方式

<!-- 第一種，只引入單個圖片，這種引入方法在非同步中引入則會報錯。比如需要遍歷出很多圖片展示時 -->
<image :src=require('圖片路徑')>
<!-- 第二種，可引入多個圖片，也可引入單個圖片。vue-cli3版本沒有static資料夾。可將靜態圖片存放到public目錄下，直接引入即可 -->
<image src="/public/image/logo.png"/>

59.vue 如何引進 sass
60.vue 修改打包後靜態資源路徑的修改
答：cli3版本：在根目錄下新建vue.config.js 檔案，然後加上以下內容：（如果已經有此檔案就直接修改）

module.exports = {
	publicPath: '', // 相對於 HTML 頁面（目錄相同） 
}