Vue3.0 對于我們前端人的重要性 —— 2021年面試必備
前言
2020年09月18日，vue3.0正式發(fā)布任柜。隨著它的發(fā)布沛厨，Vue.js再次被推上了前端的風(fēng)口浪尖。
同時宅粥，面試官的提問也將加入一些有關(guān)Vue3.0的新元素（相信近期去面試的小伙伴或多或少都會被問到Vue3.0的知識點(diǎn)）电谣。
今天就分析總結(jié)了一些Vue的面試題（本文講的非常詳細(xì)，爭取大家都能看懂企垦，對大家有所幫助）
整理面試題
一竹观、Vue.js 3.0 響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理潜索？
1.reactive
設(shè)置對象為響應(yīng)式對象。接收一個參數(shù)誊抛，判斷這參數(shù)是否是對象整陌。不是對象則直接返回這個參數(shù)泌辫，不做響應(yīng)式處理。
創(chuàng)建攔截器handerler宾毒，設(shè)置get/set/deleteproperty殿遂。
get
收集依賴（track）墨礁；
如果當(dāng)前 key 的值是對象，則為當(dāng)前 key 的對象創(chuàng)建攔截器 handler, 設(shè)置 get/set/deleteProperty焕毫；
如果當(dāng)前的 key 的值不是對象蜕企，則返回當(dāng)前 key 的值。
set
設(shè)置的新值和老值不相等時幸乒，更新為新值唇牧，并觸發(fā)更新（trigger）。
deleteProperty
當(dāng)前對象有這個 key 的時候腔召，刪除這個 key 并觸發(fā)更新（trigger）臀蛛。
2.effect
接收一個函數(shù)作為參數(shù)。作用是：訪問響應(yīng)式對象屬性時去收集依賴
3.track
接收兩個參數(shù)：target 和 key
- 如果沒有 activeEffect客峭，則說明沒有創(chuàng)建 effect 依賴
- 如果有 activeEffect抡柿，則去判斷 WeakMap 集合中是否有 target 屬性
- WeakMap 集合中沒有 target 屬性洲劣，則 set(target, (depsMap = new Map()))
- WeakMap 集合中有 target 屬性，則判斷 target 屬性的 map 值的 depsMap 中是否有 key 屬性
- depsMap 中沒有 key 屬性郊尝，則 set(key, (dep = new Set()))
- depsMap 中有 key 屬性粗悯，則添加這個 activeEffect
4.trigger
判斷 WeakMap 中是否有 target 屬性样傍，WeakMap 中有 target 屬性，則判斷 target 屬性的 map 值中是否有 key 屬性茎刚，有的話循環(huán)觸發(fā)收集的 effect()撤逢。
二、響應(yīng)式是惰性的
- 在 Vue.js 2.x 中蚊荣，對于一個深層屬性嵌套的對象互例，要劫持它內(nèi)部深層次的變化，就需要遞歸遍歷這個對象腥光，執(zhí)行 Object.defineProperty 把每一層對象數(shù)據(jù)都變成響應(yīng)式的，這無疑會有很大的性能消耗议双。
- 在 Vue.js 3.0 中捉片，使用 Proxy API 并不能監(jiān)聽到對象內(nèi)部深層次的屬性變化伍纫，因此它的處理方式是在 getter 中去遞歸響應(yīng)式，這樣的好處是真正訪問到的內(nèi)部屬性才會變成響應(yīng)式，簡單的可以說是按需實(shí)現(xiàn)響應(yīng)式说铃，減少性能消耗腻扇。
基礎(chǔ)用法：
let datas={
num:0
}
let proxy=new Proxy(datas,{
get(target,property){
return target[property]+=value
},
set(target,property,value){
target[property]+=value
}
})
三幼苛、vue3新增Composition API
vue3 新增的一組 api，它是基于函數(shù)的 api墙杯，可以更靈活的組織組件的邏輯括荡。
解決options api在大型項(xiàng)目中，options api不好拆分和重用的問題嫉髓。
setup介紹
setup 是 Vue3.0新增的一個選項(xiàng)算行， 他是組件內(nèi)使用
Composition API的入口苫耸。setup 執(zhí)行時機(jī)
setup 執(zhí)行時機(jī)是在 beforeCreate 之前執(zhí)行鲸阔。
setup 參數(shù)說明
使用
setup時迄委，它接受兩個參數(shù)：
- props: 組件傳入的屬性
- context
setup 中接受的props是響應(yīng)式的类少， 當(dāng)傳入新的 props 時硫狞，會及時被更新。由于是響應(yīng)式的财忽， 所以不可以使用 ES6 解構(gòu)泣侮，解構(gòu)會消除它的響應(yīng)式活尊。錯誤代碼示例， 這段代碼會讓 props 不再支持響應(yīng)式：
// demo.vue
export default defineComponent ({
setup(props, context) {
const { name } = props
console.log(name)
},
})
四深胳、 Vue 3.0 所采用的 Composition Api 與 Vue 2.x使用的Options Api 有什么區(qū)別铜犬？
- Options Api
包含一個描述組件選項(xiàng)（data癣猾、methods、props等）的對象options攘蔽；
API開發(fā)復(fù)雜組件满俗，同一個功能邏輯的代碼被拆分到不同選項(xiàng) 作岖；
使用mixin重用公用代碼，也有問題：命名沖突辕万，數(shù)據(jù)來源不清晰渐尿；- composition Api
vue3 新增的一組 api，它是基于函數(shù)的 api隘擎，可以更靈活的組織組件的邏輯凉夯。
解決options api在大型項(xiàng)目中劲够，options api不好拆分和重用的問題。
五蹲姐、vue3新增內(nèi)置組件 Teleport（哆啦 A 夢中的任意門）
Teleport就是一種將代碼組織邏輯依舊放在組件中人柿，這樣我們能夠使用組件內(nèi)部的數(shù)據(jù)狀態(tài)顷扩，控制組件展示的形式慰毅，但是最后渲染的地方可以是任意的汹胃，而不是局限于組件內(nèi)部
Teleport 的使用：
<template>
<teleport to="body" class="modal" v-if="show">
<div class="modal-mask" @click="close"></div>
<slot></slot>
</teleport>
</template>
<script>
import "./style.scss";
export default {
props: {
show: Boolean,
},
methods: {
close() {
this.$emit("close");
},
},
};
</script>
六着饥、Props初始化和更新流程改進(jìn)
七、Vue3 slot是什么呵哨？并說一下詳細(xì)的用法轨奄？
八挪拟、Vue 3.0 在編譯方面有哪些優(yōu)化？
九谎柄、Vue3 依賴注入子孫組件如何共享數(shù)據(jù)
十朝巫、Vue3 偵聽器實(shí)現(xiàn)原理與使用場景
十一、Vue3 組件實(shí)現(xiàn)原理核心源碼解讀
十二户辱、Vuex 數(shù)據(jù)流管理方案
十三糙臼、原生服務(wù)端渲染（SSR）的實(shí)現(xiàn)变逃、同構(gòu)開發(fā)
十四、Nuxt.js 集成式SSR框架
??在面試的時候肯定免不了被問到其他知識點(diǎn)例如HTML/CSS,JavaScript,瀏覽器,小程序,Webpack我也總結(jié)出來了，需要共享的朋友可以評論區(qū)留言“面試”或者發(fā)簡信
- javascript語法的知識點(diǎn)和面試題總結(jié)
- 前端面試題總結(jié)以及一些面試心得
- 微信小程序的面試題以及項(xiàng)目中遇到的坑
- 瀏覽器面試題
- 數(shù)據(jù)結(jié)構(gòu)與算法
Vue3.0實(shí)戰(zhàn)
一损拢、說說Vue2.0和Vue3.0有什么區(qū)別
1.重構(gòu)響應(yīng)式系統(tǒng)撒犀，使用Proxy替換Object.defineProperty或舞，使用Proxy優(yōu)勢：
- 可直接監(jiān)聽數(shù)組類型的數(shù)據(jù)變化
- 監(jiān)聽的目標(biāo)為對象本身，不需要像Object.defineProperty一樣遍歷每個屬性胆筒，有一定的性能提升
- 可攔截apply仆救、ownKeys矫渔、has等13種方法，而Object.defineProperty不行
- 直接實(shí)現(xiàn)對象屬性的新增/刪除
2.新增Composition API铆惑，更好的邏輯復(fù)用和代碼組織
3.重構(gòu) Virtual DOM
- 模板編譯時的優(yōu)化员魏，將一些靜態(tài)節(jié)點(diǎn)編譯成常量
- slot優(yōu)化，將slot編譯為lazy函數(shù)受裹，將slot的渲染的決定權(quán)交給子組件
- 模板中內(nèi)聯(lián)事件的提取并重用（原本每次渲染都重新生成內(nèi)聯(lián)函數(shù)）
4.代碼結(jié)構(gòu)調(diào)整棉饶，更便于Tree shaking镇匀，使得體積更小
5.使用Typescript替換Flow
二汗侵、Vue3的新特性有哪些
1、響應(yīng)系統(tǒng)的變動
由原來的Object.defineProperty 的getter 和 setter发乔，改變成為了ES2015 Proxy 作為其觀察機(jī)制栏尚。
Proxy的優(yōu)勢：消除了以前存在的警告只恨，使速度加倍坤次，并節(jié)省了一半的內(nèi)存開銷斥赋。
2疤剑、虛擬DOM重寫（Virtual DOM Rewrite）
虛擬 DOM 從頭開始重寫，我們可以期待更多的編譯時提示來減少運(yùn)行時開銷疑故。重寫將包括更有效的代碼來創(chuàng)建虛擬節(jié)點(diǎn)纵势。
3、組件渲染的優(yōu)化（優(yōu)化插槽生成）
Vue2當(dāng)中在父組件渲染同時软舌，子組件也會渲染牛曹。 Vue3就可以單獨(dú)渲染父組件黎比、子組件。
4演闭、靜態(tài)樹提升（Static Tree Hoisting）
使用靜態(tài)樹提升船响，這意味著 Vue 3 的編譯器將能夠檢測到什么是靜態(tài)組件躲履，然后將其提升工猜，從而降低了渲染成本篷帅。它將能夠跳過未整個樹結(jié)構(gòu)打補(bǔ)丁的過程。
5惊橱、靜態(tài)屬性提升（Static Props Hoisting）
此外税朴，我們可以期待靜態(tài)屬性提升家制，其中 Vue 3 將跳過不會改變節(jié)點(diǎn)的打補(bǔ)丁過程颤殴。
總體來說：
- ts支持
- 源碼更易讀
- 更小
- 更容易維護(hù)
- 更加友好
- 更易用
三涵但、基于vite/webpack實(shí)現(xiàn)Vue3工程化部署
四帖蔓、掌握setup和10種響應(yīng)式系統(tǒng)API
五讨阻、掌握新生命周期函數(shù)
六篡殷、模板refs的使用
七板辽、Vue3中的響應(yīng)式系統(tǒng)和dom-diff
vue核心知識點(diǎn)
常規(guī)篇
1.vuex的action有返回值嗎劲弦？返回的是什么？
- store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise次坡，并且 store.dispatch 仍舊返回 Promise
- Action 通常是異步的砸琅，要知道 action 什么時候結(jié)束或者組合多個 action以處理更加復(fù)雜的異步流程症脂，可以通過
定義action時返回一個promise對象淫僻，就可以在派發(fā)action的時候就可以通過處理返回的 Promise處理異步流程
一個 store.dispatch 在不同模塊中可以觸發(fā)多個 action 函數(shù)雳灵。在這種情況下悯辙，只有當(dāng)所有觸發(fā)函數(shù)完成后，返
回的 Promise 才會執(zhí)行岛啸。
2.為什么不直接分發(fā)mutation,而要通過分發(fā)action之后提交 mutation變更狀態(tài)
- mutation 必須同步執(zhí)行，我們可以在 action 內(nèi)部執(zhí)行異步操作
- 可以進(jìn)行一系列的異步操作瓤狐，并且通過提交 mutation 來記錄 action 產(chǎn)生的副作用（即狀態(tài)變更）
3.為什么 v-for 和 v-if 不建議用在一起
- 當(dāng) v-for 和 v-if 處于同一個節(jié)點(diǎn)時，v-for 的優(yōu)先級比 v-if 更高嗓节，這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)
中拦宣。如果要遍歷的數(shù)組很大鸵隧，而真正要展示的數(shù)據(jù)很少時意推，這將造成很大的性能浪費(fèi) - 這種場景建議使用 computed菊值，先對數(shù)據(jù)進(jìn)行過濾
4.組件中的data為什么是一個函數(shù)？
- 一個組件被復(fù)用多次的話昵宇，也就會創(chuàng)建多個實(shí)例趟薄。本質(zhì)上杭煎，這些實(shí)例用的都是同一個構(gòu)造函數(shù)卒落。
- 如果data是對象的話儡毕，對象屬于引用類型，會影響到所有的實(shí)例腰湾。所以為了保證組件不同的實(shí)例之間data不沖
突雷恃，data必須是一個函數(shù)。
5.子組件為什么不可以修改父組件傳遞的Prop费坊？怎么理解vue的單向數(shù)據(jù)流倒槐？
- Vue提倡單向數(shù)據(jù)流,即父級props的更新會流向子組件,但是反過來則不行。
- 這是為了防止意外的改變父組件狀態(tài)附井，使得應(yīng)用的數(shù)據(jù)流變得難以理解讨越。
- 如果破壞了單向數(shù)據(jù)流两残，當(dāng)應(yīng)用復(fù)雜時，debug 的成本會非常高把跨。
6.v-model是如何實(shí)現(xiàn)雙向綁定的？
- v-model是用來在表單控件或者組件上創(chuàng)建雙向綁定的
- 他的本質(zhì)是v-bind和v-on的語法糖
- 在一個組件上使用v-model着逐，默認(rèn)會為組件綁定名為value的prop和名為input的事件
7.computed 和 watch 的區(qū)別和運(yùn)用的場景崔赌？
8.Vue2.x組件通信有哪些方式？
9.為什么不建議用index作為key?
10.說一下虛擬Dom以及key屬性的作用
11.為什么不建議用index作為key?
生命周期篇
1.說一下你對Vue的生命周期的理解
2.Vue中組件生命周期調(diào)用順序是什么樣的耸别？
3.在什么階段才能訪問操作DOM峰鄙？
4.你的接口請求一般放在哪個生命周期中？
路由篇
1.vue路由hash模式和history模式實(shí)現(xiàn)原理分別是什么太雨，他們的區(qū)別是什么吟榴？
2.路由懶加載是什么意思？如何實(shí)現(xiàn)路由懶加載囊扳？
3.在 Vue 實(shí)例中編寫生命周期 hook 或其他 option/properties 時吩翻，為什么不使用箭頭函數(shù)？
4.說說你對keep-alive組件的了解
5.說說你對SSR的了解
6.你都做過哪些Vue的性能優(yōu)化锥咸？
最后
說實(shí)話狭瞎，作為一名前端工程師，不論你需不需要面試都應(yīng)該好好看下這份資料搏予。我大概擼了一遍熊锭，真的是堪稱典范，拿到手總是不虧的~
以上《Vue面試知識點(diǎn)和Vue3.0面試題總結(jié)》我已經(jīng)全部為大家打包準(zhǔn)備好了雪侥，希望對正在學(xué)習(xí)的你有所幫助碗殷！
更多：
- 前端基礎(chǔ)（HTML/CSS）
- JavaScript面試題
- ES6
- Node.js
- React面試題
- 算法面試題
- 瀏覽器渲染
- 計(jì)算機(jī)網(wǎng)絡(luò)
- Webpack
- 設(shè)計(jì)模式
- 微信小程序?qū)崙?zhàn)
