2020年,vue面試遇到的問題(中)

0.前言

原文有 36 到 vue 常用面試題，考慮到太多一次也看不完，所以分為 上、中、下三篇，如果你能讀完這三篇文章，相信你在面試中 vue 的問題你不會(huì)怕了。

以前系列文章：

• 2020年，vue面試遇到的問題（上）

11、怎么在vue中點(diǎn)擊別的區(qū)域輸入框不會(huì)失去焦點(diǎn)？

答：阻止事件的默認(rèn)行為

具體操作：監(jiān)聽你想點(diǎn)擊后不會(huì)丟失 input 焦點(diǎn)的那個(gè)元素的 mousedown 事件，回調(diào)里面調(diào)用 event.preventDefault()，會(huì)阻止使當(dāng)前焦點(diǎn)丟失這一默認(rèn)行為。

12、vue中data的屬性可以和methods中的方法同名嗎？為什么？

答：不可以

因?yàn)椋琕ue會(huì)把methods和data的東西，全部代理到Vue生成的對(duì)象中，會(huì)產(chǎn)生覆蓋所以最好不要同名

13、怎么給vue定義全局的方法？

Vue.prototype.方法名稱

14、Vue 2.0 不再支持在 v-html 中使用過濾器怎么辦？

解決方法：

①全局方法（推薦）

Vue.prototype.msg = function（msg）{
return msg.replace（"\n"，"
"）
 }
 
"msg(content)">div>

②computed方法

computed：{
 content：function(msg){
return msg.replace("\n"，"
")
 }
}
{{content}}</div>

③$options.filters(推薦)

filters：{
 msg：function(msg){
return msg.replace(/\n/g，"
")
 }
}，  　　
data：{
 content："XXXX"
}
"$options.filters.msg(content)">div>

14、怎么解決vue打包后靜態(tài)資源圖片失效的問題？

答：將靜態(tài)資源的存放位置放在src目錄下

16、怎么解決vue動(dòng)態(tài)設(shè)置img的src不生效的問題？

class="logo" :src="logo" alt="公司logo">
data() {
return {
logo:require("./../assets/images/logo.png"),
  };
}

因?yàn)閯?dòng)態(tài)添加src被當(dāng)做靜態(tài)資源處理了，沒有進(jìn)行編譯，所以要加上require

17、跟keep-alive有關(guān)的生命周期是哪些？描述下這些生命周期

activated和deactivated兩個(gè)生命周期函數(shù)

1.activated：當(dāng)組件激活時(shí)，鉤子觸發(fā)的順序是created->mounted->activated

2.deactivated: 組件停用時(shí)會(huì)觸發(fā)deactivated，當(dāng)再次前進(jìn)或者后退的時(shí)候只觸發(fā)activated

18、你知道vue中key的原理嗎？說說你對(duì)它的理解

暫時(shí)沒弄明白，等會(huì)兒寫

19、vue中怎么重置data？

答：Object.assign()

Object.assign（）方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。

注意，具有相同屬性的對(duì)象，同名屬性，后邊的會(huì)覆蓋前邊的。

由于Object.assign()有上述特性，所以我們?cè)赩ue中可以這樣使用：

Vue組件可能會(huì)有這樣的需求：在某種情況下，需要重置Vue組件的data數(shù)據(jù)。此時(shí)，我們可以通過this.獲取當(dāng)前狀態(tài)下的，通過options.data()獲取該組件初始狀態(tài)下的data。

然后只要使用Object.assign(this.options.data())就可以將當(dāng)前狀態(tài)的data重置為初始狀態(tài)。

20、vue怎么實(shí)現(xiàn)強(qiáng)制刷新組件？

答：① v-if ? ? ?② this.$forceUpdate

v-if

當(dāng)v-if的值發(fā)生變化時(shí)，組件都會(huì)被重新渲染一遍。因此，利用v-if指令的特性，可以達(dá)到強(qiáng)制
if="update">comp>
<button @click="reload()">刷新comp組件button>
data() {
return {
update: true
  }
 },
methods: {
  reload() {
// 移除組件
this.update = false
// 在組件移除后，重新渲染組件
// this.$nextTick可實(shí)現(xiàn)在DOM 狀態(tài)更新后，執(zhí)行傳入的方法。
this.$nextTick(() => {
this.update = true
    })
  }
 }

this.$forceUpdate

"reload()">刷新當(dāng)前組件</button>
methods: {
  reload() {
    this.$forceUpdate()
  }
}

21、vue如何優(yōu)化首頁(yè)的加載速度？

① 第三方j(luò)s庫(kù)按CDN引入（一、cdn引入 二、去掉第三方庫(kù)引入的import 三、把第三方庫(kù)的js文件從打包文件里去掉）

② vue-router路由懶加載

③ 壓縮圖片資源

④ 靜態(tài)文件本地緩存

http緩存：推薦網(wǎng)站：https://www.cnblogs.com/chinajava/p/5705169.html

service worker離線緩存:，缺點(diǎn)：需要在HTTPS站點(diǎn)下，推薦：http://lzw.me/a/pwa-service-worker.html

⑤ 服務(wù)器端SSR渲染

除了上面的方案以外，另一種方案也不容小視

我們先說說通常項(xiàng)目中是如何加載頁(yè)面數(shù)據(jù)：Vue組件生命周期中請(qǐng)求異步接口，在mounted之前應(yīng)該都可以，據(jù)我了解絕大部分同學(xué)是在mounted的時(shí)候執(zhí)行異步請(qǐng)求。但是我們可以把頁(yè)面需要的請(qǐng)求放到Vue-Router的守衛(wèi)中執(zhí)行，意思是在路由beforeEnter之前就可以請(qǐng)求待加載頁(yè)面中所有組件需要的數(shù)據(jù)，此時(shí)待加載頁(yè)面的Vue組件還沒開始渲染，而Vue組件開始渲染的時(shí)候我們就可以用Vuex里面的數(shù)據(jù)了。

以上方法的實(shí)現(xiàn)思路：圖意：每個(gè)頁(yè)面（Page）中都會(huì)有很多個(gè)Vue組件，可以在Vue組件中添加自定義屬性fetchData，fetchData里面可以執(zhí)行異步請(qǐng)求（圖中執(zhí)行Vuex的Action），但是我們?cè)趺传@取到所有組件的fetchData方法并執(zhí)行呢？如圖所示，在router.beforeResolve守衛(wèi)中，我們看看router.beforeResolve的定義，所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用，意思是即使頁(yè)面中有異步組件，它會(huì)等待異步組件解析之后執(zhí)行，并且解析守衛(wèi)在beforeEnter之前執(zhí)行。那我們?cè)趺丛诮馕鍪匦l(wèi)中獲取到待加載頁(yè)面的所有組件呢？通過router.getMatchedComponents方法。這樣我們就可以在解析守衛(wèi)中獲取到所有待加載組件的fetchData方法并執(zhí)行，這樣無疑會(huì)在組件開始渲染之后獲取到所有數(shù)據(jù)，提高頁(yè)面加載速度。

很多人可能有個(gè)疑問，如果異步請(qǐng)求放在beforeCreate和created不是一樣嗎？答案是否定的，因?yàn)檫@種方式可以將異步請(qǐng)求放到beforeCreate之前！

22、你了解vue的diff算法嗎？

推薦網(wǎng)站：https://www.cnblogs.com/wind-lanyan/p/9061684.html

23、vue能監(jiān)聽到數(shù)組變化的方法有哪些？為什么這些方法能監(jiān)聽到呢？

Vue.js觀察數(shù)組變化主要通過以下7個(gè)方法（push、pop、shift、unshift、splice、sort、reverse）

大家知道，通過Object.defineProperty()劫持?jǐn)?shù)組為其設(shè)置getter和setter后，調(diào)用的數(shù)組的push、splice、pop等方法改變數(shù)組元素時(shí)并不會(huì)觸發(fā)數(shù)組的setter，繼而數(shù)組的數(shù)據(jù)變化并不是響應(yīng)式的，但是vue實(shí)際開發(fā)中卻是實(shí)時(shí)響應(yīng)的，是因?yàn)関ue重寫了數(shù)組的push、splice、pop等方法

從源碼中可以看出，ob.dep.notify()將當(dāng)前數(shù)組的變更通知給其訂閱者，這樣當(dāng)使用重寫后方法改變數(shù)組后，數(shù)組訂閱者會(huì)將這邊變化更新到頁(yè)面中

原文作者：東起

原文鏈接：https://zhuanlan.zhihu.com/p/103763164

推薦閱讀