一医清、對(duì)于MVVM的理解放可？
MVVM 是 Model-View-ViewModel 的縮寫(xiě)。
Model代表數(shù)據(jù)模型茫叭，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯酬屉。
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)揍愁。
ViewModel 監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為呐萨、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象莽囤，連接Model和View谬擦。
在MVVM架構(gòu)下，View 和 Model 之間并沒(méi)有直接的聯(lián)系朽缎，而是通過(guò)ViewModel進(jìn)行交互惨远，Model 和 ViewModel 之間的交互是雙向的谜悟， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上北秽。
ViewModel 通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)葡幸，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉贺氓，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯蔚叨，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理辙培。
MVVM的優(yōu)缺點(diǎn)?
優(yōu)點(diǎn):
分離視圖（View）和模型（Model）,降低代碼耦合蔑水，提高視圖或者邏輯的重用性: 比如視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定不同的"View"上扬蕊，當(dāng)View變化的時(shí)候Model不可以不變搀别，當(dāng)Model變化的時(shí)候View也可以不變。你可以把一些視圖邏輯放在一個(gè)ViewModel里面厨相，讓很多view重用這段視圖邏輯
提高可測(cè)試性: ViewModel的存在可以幫助開(kāi)發(fā)者更好地編寫(xiě)測(cè)試代碼
自動(dòng)更新dom: 利用雙向綁定,數(shù)據(jù)更新后視圖自動(dòng)更新,讓開(kāi)發(fā)者從繁瑣的手動(dòng)dom中解放
缺點(diǎn):
Bug很難被調(diào)試: 因?yàn)槭褂秒p向綁定的模式领曼，當(dāng)你看到界面異常了，有可能是你View的代碼有Bug蛮穿，也可能是Model的代碼有問(wèn)題。數(shù)據(jù)綁定使得一個(gè)位置的Bug被快速傳遞到別的位置毁渗，要定位原始出問(wèn)題的地方就變得不那么容易了践磅。另外，數(shù)據(jù)綁定的聲明是指令式地寫(xiě)在View的模版當(dāng)中的灸异，這些內(nèi)容是沒(méi)辦法去打斷點(diǎn)debug的
一個(gè)大的模塊中model也會(huì)很大府适，雖然使用方便了也很容易保證了數(shù)據(jù)的一致性，當(dāng)時(shí)長(zhǎng)期持有肺樟，不釋放內(nèi)存就造成了花費(fèi)更多的內(nèi)存
對(duì)于大型的圖形應(yīng)用程序檐春，視圖狀態(tài)較多，ViewModel的構(gòu)建和維護(hù)的成本都會(huì)比較高么伯。
二疟暖、Vue的生命周期
beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測(cè)和初始化事件還未開(kāi)始
created（創(chuàng)建后） 完成數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算田柔，初始化事件俐巴，el 替換缘圈，并掛載到實(shí)例上去之后調(diào)用劣光。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對(duì)象。完成模板中的html渲染到html頁(yè)面中糟把。此過(guò)程中進(jìn)行ajax交互绢涡。
beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前糊饱〈沽龋可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程另锋。
updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用滞项。調(diào)用時(shí)，組件DOM已經(jīng)更新夭坪，所以可以執(zhí)行依賴于DOM的操作文判。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)室梅，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)戏仓。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy（銷毀前） 在實(shí)例銷毀之前調(diào)用亡鼠。實(shí)例仍然完全可用赏殃。
destroyed（銷毀后） 在實(shí)例銷毀之后調(diào)用。調(diào)用后间涵，所有的事件監(jiān)聽(tīng)器會(huì)被移除仁热，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用勾哩。
1.什么是vue生命周期抗蠢？
答： Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期思劳。從開(kāi)始創(chuàng)建迅矛、初始化數(shù)據(jù)、編譯模板潜叛、掛載Dom→渲染秽褒、更新→渲染、銷毀等一系列過(guò)程钠导，稱之為 Vue 的生命周期震嫉。
2.vue生命周期的作用是什么？
答：它的生命周期中有多個(gè)事件鉤子牡属，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯票堵。
3.vue生命周期總共有幾個(gè)階段？
答：它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后逮栅。
4.第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子悴势？
答：會(huì)觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted 窗宇。
5.DOM 渲染在 哪個(gè)周期中就已經(jīng)完成？
答：DOM 渲染在 mounted 中就已經(jīng)完成了特纤。
三军俊、 Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter捧存，getter粪躬，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)昔穴。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)時(shí)镰官，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter吗货。用戶看不到 getter/setter泳唠，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化宙搬。
vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口笨腥，整合Observer，Compile和Watcher三者勇垛，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model的數(shù)據(jù)變化脖母，通過(guò)Compile來(lái)解析編譯模板指令（vue中是用來(lái)解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁闲孤，達(dá)到數(shù)據(jù)變化 —>視圖更新镶奉；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。
js實(shí)現(xiàn)簡(jiǎn)單的雙向綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四崭放、Vue組件間的參數(shù)傳遞
Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信鸽凶、兄弟組件通信
（1）props / $emit 適用 父子組件通信
這種方法是 Vue 組件的基礎(chǔ)币砂，相信大部分同學(xué)耳聞能詳，所以此處就不舉例展開(kāi)介紹玻侥。
（2）ref 與 <mjx-container class="MathJax CtxtMenu_Attached_0" jax="SVG" tabindex="0" ctxtmenu_counter="0" style="box-sizing: border-box;"></mjx-container>children 適用 父子組件通信
ref：如果在普通的 DOM 元素上使用决摧，引用指向的就是 DOM 元素；如果用在子組件上凑兰，引用就指向組件實(shí)例
<mjx-container class="MathJax CtxtMenu_Attached_0" jax="SVG" tabindex="0" ctxtmenu_counter="1" style="box-sizing: border-box;"></mjx-container>children：訪問(wèn)父 / 子實(shí)例
（3）EventBus （<mjx-container class="MathJax CtxtMenu_Attached_0" jax="SVG" tabindex="0" ctxtmenu_counter="2" style="box-sizing: border-box;"></mjx-container>on） 適用于 父子掌桩、隔代、兄弟組件通信
這種方法通過(guò)一個(gè)空的 Vue 實(shí)例作為中央事件總線（事件中心）姑食，用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件波岛，從而實(shí)現(xiàn)任何組件間的通信，包括父子音半、隔代则拷、兄弟組件贡蓖。
（5）provide / inject 適用于 隔代組件通信
祖先組件中通過(guò) provider 來(lái)提供變量，然后在子孫組件中通過(guò) inject 來(lái)注入變量煌茬。 provide / inject API 主要解決了跨級(jí)組件間的通信問(wèn)題斥铺，不過(guò)它的使用場(chǎng)景，主要是子組件獲取上級(jí)組件的狀態(tài)坛善，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系晾蜘。
（6）Vuex 適用于 父子、隔代眠屎、兄弟組件通信
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式剔交。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）∽榱Γ“store” 基本上就是一個(gè)容器省容，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的燎字。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候腥椒，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新候衍。
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation笼蛛。這樣可以方便地跟蹤每一個(gè)狀態(tài)的變化。
五蛉鹿、Vue的路由實(shí)現(xiàn)：hash模式 滨砍、 history模式、abstract模式
hash模式：在瀏覽器中符號(hào)“#”妖异，#以及#后面的字符稱之為hash惋戏，用window.location.hash讀取他膳；
特點(diǎn)：hash雖然在URL中响逢，但不被包括在HTTP請(qǐng)求中；用來(lái)指導(dǎo)瀏覽器動(dòng)作棕孙，對(duì)服務(wù)端安全無(wú)用舔亭，hash不會(huì)重加載頁(yè)面。
hash 模式下蟀俊，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中钦铺，如 http://www.xxx.com，因此對(duì)于后端來(lái)說(shuō)肢预，即使沒(méi)有做到對(duì)路由的全覆蓋矛洞，也不會(huì)返回 404 錯(cuò)誤。
hash 模式的實(shí)現(xiàn)原理
早期的前端路由的實(shí)現(xiàn)就是基于 location.hash 來(lái)實(shí)現(xiàn)的误甚。其實(shí)現(xiàn)原理很簡(jiǎn)單缚甩，location.hash 的值就是 URL 中 # 后面的內(nèi)容谱净。比如下面這個(gè)網(wǎng)站，它的 location.hash 的值為 '#search'：
https://www.abc.com#search
hash 路由模式的實(shí)現(xiàn)主要是基于下面幾個(gè)特性：
URL 中 hash 值只是客戶端的一種狀態(tài)擅威，也就是說(shuō)當(dāng)向服務(wù)器端發(fā)出請(qǐng)求時(shí)壕探，hash 部分不會(huì)被發(fā)送；
hash 值的改變郊丛，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄李请。因此我們能通過(guò)瀏覽器的回退、前進(jìn)按鈕控制hash 的切換厉熟；
可以通過(guò) a 標(biāo)簽导盅，并設(shè)置 href 屬性，當(dāng)用戶點(diǎn)擊這個(gè)標(biāo)簽后揍瑟，URL 的 hash 值會(huì)發(fā)生改變白翻；或者使用 JavaScript 來(lái)對(duì) loaction.hash 進(jìn)行賦值，改變 URL 的 hash 值绢片；
我們可以使用 hashchange 事件來(lái)監(jiān)聽(tīng) hash 值的變化滤馍，從而對(duì)頁(yè)面進(jìn)行跳轉(zhuǎn)（渲染）。
history模式：history采用HTML5的新特性底循；且提供了兩個(gè)新方法：pushState（）巢株，replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽(tīng)到狀態(tài)變更熙涤。
history 模式下阁苞，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如 http://www.xxx.com/items/id祠挫。后端如果缺少對(duì) /items/id 的路由處理那槽，將返回 404 錯(cuò)誤。Vue-Router 官網(wǎng)里如此描述：“不過(guò)這種模式要玩好等舔，還需要后臺(tái)配置支持……所以呢倦炒，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面软瞎，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面±叮”
history 模式的實(shí)現(xiàn)原理
HTML5 提供了 History API 來(lái)實(shí)現(xiàn) URL 的變化涤浇。其中做最主要的 API 有以下兩個(gè)：history.pushState() 和 history.repalceState()。這兩個(gè) API 可以在不進(jìn)行刷新的情況下魔慷，操作瀏覽器的歷史紀(jì)錄只锭。唯一不同的是，前者是新增一個(gè)歷史記錄院尔，后者是直接替換當(dāng)前的歷史記錄蜻展，如下所示：
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
history 路由模式的實(shí)現(xiàn)主要基于存在下面幾個(gè)特性：
pushState 和 repalceState 兩個(gè) API 來(lái)操作實(shí)現(xiàn) URL 的變化 喉誊；
我們可以使用 popstate 事件來(lái)監(jiān)聽(tīng) url 的變化，從而對(duì)頁(yè)面進(jìn)行跳轉(zhuǎn)（渲染）纵顾；
history.pushState() 或 history.replaceState() 不會(huì)觸發(fā) popstate 事件伍茄，這時(shí)我們需要手動(dòng)觸發(fā)頁(yè)面跳轉(zhuǎn)（渲染）疮鲫。
abstract模式 : 支持所有 JavaScript 運(yùn)行環(huán)境府瞄，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API低矮，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式.
(后續(xù)補(bǔ)上)
六汉额、說(shuō)說(shuō)對(duì)v-model的了解曹仗？
我們?cè)?vue 項(xiàng)目中主要使用 v-model 指令在表單 input、textarea蠕搜、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定怎茫，我們知道 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖，v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
text 和 textarea 元素使用 value 屬性和 input 事件妓灌；
checkbox 和 radio 使用 checked 屬性和 change 事件轨蛤；
select 字段將 value 作為 prop 并將 change 作為事件。
以 input 表單元素為例：
<input v-model='something'>
相當(dāng)于
<input v-bind:value="something" v-on:input="something = $event.target.value">
如果在自定義組件中旬渠，v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件俱萍，如下所示：
父組件：
<ModelChild v-model="message"></ModelChild>
子組件：
<div>{{value}}</div>
props:{
value: String
},
methods: {
test1(){
this.$emit('input', '小紅')
},
},
七、vue路由的鉤子函數(shù)
首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)告丢，beforeEach枪蘑，afterEach等，一般用于頁(yè)面title的修改岖免。一些需要登錄才能調(diào)整頁(yè)面的重定向功能岳颇。
beforeEach主要有3個(gè)參數(shù)to，from颅湘，next：
to：route即將進(jìn)入的目標(biāo)路由對(duì)象话侧，
from：route當(dāng)前導(dǎo)航正要離開(kāi)的路由
next：function一定要調(diào)用該方法resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)闯参≌芭簦可以控制網(wǎng)頁(yè)的跳轉(zhuǎn)。
八鹿寨、vuex是什么新博？怎么使用？哪種功能場(chǎng)景使用它脚草？
只用來(lái)讀取的狀態(tài)集中放在store中赫悄； 改變狀態(tài)的方式是提交mutations，這是個(gè)同步的事物； 異步邏輯應(yīng)該封裝在action中埂淮。
在main.js引入store姑隅，注入。新建了一個(gè)目錄store倔撞，….. export 讲仰。
場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)误窖、音樂(lè)播放叮盘、登錄狀態(tài)、加入購(gòu)物車
[圖片上傳失敗...(image-a4a009-1584701160483)]
state
Vuex 使用單一狀態(tài)樹(shù),即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例霹俺，但單一狀態(tài)樹(shù)和模塊化并不沖突柔吼。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)丙唧。
mutations
mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)愈魏。
getters
類似vue的計(jì)算屬性，主要用來(lái)過(guò)濾一些數(shù)據(jù)想际。
action
actions可以理解為通過(guò)將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法培漏，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)。view 層通過(guò) store.dispath 來(lái)分發(fā) action胡本。
const store = new Vuex.Store({ //store實(shí)例
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
modules
項(xiàng)目特別復(fù)雜的時(shí)候牌柄，可以讓每一個(gè)模塊擁有自己的state、mutation侧甫、action珊佣、getters,使得結(jié)構(gòu)非常清晰，方便管理披粟。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
九咒锻、vue-cli如何新增自定義指令？
1.創(chuàng)建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 創(chuàng)建指令(可以多個(gè))
directives: {
// 指令名稱
dir1: {
inserted(el) {
// 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOM
console.log(el);
console.log(arguments);
// 對(duì)DOM進(jìn)行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
2.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
3.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
十守屉、vue如何自定義一個(gè)過(guò)濾器惑艇？
html代碼：
<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}
</div>
JS代碼：
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
全局定義過(guò)濾器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
過(guò)濾器接收表達(dá)式的值 (msg) 作為第一個(gè)參數(shù)。capitalize 過(guò)濾器將會(huì)收到 msg的值作為第一個(gè)參數(shù)拇泛。
十一滨巴、對(duì)keep-alive 的了解？
keep-alive是 Vue 內(nèi)置的一個(gè)組件俺叭，可以使被包含的組件保留狀態(tài)兢卵，或避免重新渲染。
在vue 2.1.0 版本之后绪颖，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優(yōu)先級(jí)大于include) 。
使用方法
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 該組件是否緩存取決于include和exclude屬性 -->
</component>
</keep-alive>
參數(shù)解釋
include - 字符串或正則表達(dá)式柠横，只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式窃款，任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“牍氛，”分隔字符串晨继、正則表達(dá)式、數(shù)組搬俊。當(dāng)使用正則或者是數(shù)組時(shí)紊扬，要記得使用v-bind 。
使用示例
<!-- 逗號(hào)分隔字符串唉擂，只有組件a與b被緩存餐屎。 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 正則表達(dá)式 (需要使用 v-bind，符合匹配規(guī)則的都會(huì)被緩存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>
<!-- Array (需要使用 v-bind玩祟，被包含的都會(huì)被緩存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>
十二腹缩、對(duì) SPA 單頁(yè)面的理解，它的優(yōu)缺點(diǎn)分別是什么空扎？
SPA（ single-page application ）僅在 Web 頁(yè)面初始化時(shí)加載相應(yīng)的 HTML藏鹊、JavaScript 和 CSS。一旦頁(yè)面加載完成转锈，SPA 不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)盘寡；取而代之的是利用路由機(jī)制實(shí)現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互撮慨，避免頁(yè)面的重新加載竿痰。
優(yōu)點(diǎn)：
用戶體驗(yàn)好、快甫煞，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面菇曲，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染；
基于上面一點(diǎn)抚吠，SPA 相對(duì)對(duì)服務(wù)器壓力谐３薄；
前后端職責(zé)分離楷力，架構(gòu)清晰喊式，前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理萧朝；
缺點(diǎn)：
初次加載耗時(shí)多：為實(shí)現(xiàn)單頁(yè) Web 應(yīng)用功能及顯示效果岔留，需要在加載頁(yè)面的時(shí)候?qū)?JavaScript、CSS 統(tǒng)一加載检柬，部分頁(yè)面按需加載献联；
前進(jìn)后退路由管理：由于單頁(yè)應(yīng)用在一個(gè)頁(yè)面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進(jìn)后退功能，所有的頁(yè)面切換需要自己建立堆棧管理里逆；
SEO 難度較大：由于所有的內(nèi)容都在一個(gè)頁(yè)面中動(dòng)態(tài)替換顯示进胯，所以在 SEO 上其有著天然的弱勢(shì)。
十三原押、Class 與 Style 如何動(dòng)態(tài)綁定胁镐？
Class 可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定：
對(duì)象語(yǔ)法：
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
isActive: true,
hasError: false
}
數(shù)組語(yǔ)法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
Style 也可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定：
對(duì)象語(yǔ)法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
數(shù)組語(yǔ)法：
<div v-bind:style="[styleColor, styleSize]"></div>
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
十四、理解 Vue 的單向數(shù)據(jù)流诸衔？
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中盯漂，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)笨农，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解就缆。
額外的，每次父級(jí)組件發(fā)生更新時(shí)磁餐，子組件中所有的 prop 都將會(huì)刷新為最新的值违崇。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了诊霹，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告羞延。子組件想修改時(shí)，只能通過(guò) $emit 派發(fā)一個(gè)自定義事件脾还，父組件接收到后伴箩，由父組件修改。
有兩種常見(jiàn)的試圖改變一個(gè) prop 的情形 :
這個(gè) prop 用來(lái)傳遞一個(gè)初始值鄙漏；這個(gè)子組件接下來(lái)希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來(lái)使用嗤谚。 在這種情況下，最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換怔蚌。 在這種情況下巩步，最好使用這個(gè) prop 的值來(lái)定義一個(gè)計(jì)算屬性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
十五、computed 和 watch 的區(qū)別和運(yùn)用的場(chǎng)景桦踊？
computed： 是計(jì)算屬性椅野，依賴其它屬性值，并且 computed 的值有緩存籍胯，只有它依賴的屬性值發(fā)生改變竟闪，下一次獲取 computed 的值時(shí)才會(huì)重新計(jì)算 computed 的值；
watch： 更多的是「觀察」的作用杖狼，類似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào) 炼蛤，每當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作；
運(yùn)用場(chǎng)景：
當(dāng)我們需要進(jìn)行數(shù)值計(jì)算蝶涩，并且依賴于其它數(shù)據(jù)時(shí)理朋，應(yīng)該使用 computed絮识，因?yàn)榭梢岳?computed 的緩存特性，避免每次獲取值時(shí)嗽上，都要重新計(jì)算笋除；
當(dāng)我們需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，應(yīng)該使用 watch炸裆，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 ( 訪問(wèn)一個(gè) API )，限制我們執(zhí)行該操作的頻率鲜屏，并在我們得到最終結(jié)果前烹看，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無(wú)法做到的洛史。
十六惯殊、直接給一個(gè)數(shù)組項(xiàng)賦值，Vue 能檢測(cè)到變化嗎也殖？
由于 JavaScript 的限制土思，Vue 不能檢測(cè)到以下數(shù)組的變動(dòng)：
當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)忆嗜，例如：vm.items.length = newLength
為了解決第一個(gè)問(wèn)題己儒，Vue 提供了以下操作方法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一個(gè)別名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
為了解決第二個(gè)問(wèn)題捆毫，Vue 提供了以下操作方法：
// Array.prototype.splice
vm.items.splice(newLength)
十七闪湾、在哪個(gè)生命周期內(nèi)調(diào)用異步請(qǐng)求？
可以在鉤子函數(shù) created绩卤、beforeMount途样、mounted 中進(jìn)行調(diào)用，因?yàn)樵谶@三個(gè)鉤子函數(shù)中濒憋，data 已經(jīng)創(chuàng)建何暇，可以將服務(wù)端端返回的數(shù)據(jù)進(jìn)行賦值。但是本人推薦在 created 鉤子函數(shù)中調(diào)用異步請(qǐng)求凛驮，因?yàn)樵?created 鉤子函數(shù)中調(diào)用異步請(qǐng)求有以下優(yōu)點(diǎn)：
能更快獲取到服務(wù)端數(shù)據(jù)裆站，減少頁(yè)面 loading 時(shí)間；
ssr 不支持 beforeMount 辐烂、mounted 鉤子函數(shù)遏插，所以放在 created 中有助于一致性；
十八纠修、父組件可以監(jiān)聽(tīng)到子組件的生命周期嗎胳嘲？
比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽(tīng)到子組件掛載 mounted 就做一些邏輯處理扣草，可以通過(guò)以下寫(xiě)法實(shí)現(xiàn)：
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
以上需要手動(dòng)通過(guò) $emit 觸發(fā)父組件的事件了牛，更簡(jiǎn)單的方式可以在父組件引用子組件時(shí)通過(guò) @hook 來(lái)監(jiān)聽(tīng)即可颜屠，如下所示：
// Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
console.log('父組件監(jiān)聽(tīng)到 mounted 鉤子函數(shù) ...');
},
// Child.vue
mounted(){
console.log('子組件觸發(fā) mounted 鉤子函數(shù) ...');
},
// 以上輸出順序?yàn)椋?// 子組件觸發(fā) mounted 鉤子函數(shù) ...
// 父組件監(jiān)聽(tīng)到 mounted 鉤子函數(shù) ...
當(dāng)然 @hook 方法不僅僅是可以監(jiān)聽(tīng) mounted，其它的生命周期事件鹰祸，例如：created甫窟，updated 等都可以監(jiān)聽(tīng)
十九、組件中 data 為什么是一個(gè)函數(shù)蛙婴？
因?yàn)榻M件是用來(lái)復(fù)用的粗井，且 JS 里對(duì)象是引用關(guān)系，如果組件中 data 是一個(gè)對(duì)象街图，那么這樣作用域沒(méi)有隔離浇衬，子組件中的 data 屬性值會(huì)相互影響，如果組件中 data 選項(xiàng)是一個(gè)函數(shù)餐济，那么每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝耘擂，組件實(shí)例之間的 data 屬性值不會(huì)互相影響；而 new Vue 的實(shí)例絮姆，是不會(huì)被復(fù)用的醉冤，因此不存在引用對(duì)象的問(wèn)題。
篙悯。
二十蚁阳、Vue 怎么用 vm.$set() 解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題 ？
受現(xiàn)代 JavaScript 的限制 辕近，Vue 無(wú)法檢測(cè)到對(duì)象屬性的添加或刪除韵吨。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的移宅。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 來(lái)實(shí)現(xiàn)為對(duì)象添加響應(yīng)式屬性归粉，那框架本身是如何實(shí)現(xiàn)的呢？
Vue 源碼
export function set (target: Array<any> | Object, key: any, val: any): any {
// target 為數(shù)組
if (Array.isArray(target) && isValidArrayIndex(key)) {
// 修改數(shù)組的長(zhǎng)度, 避免索引>數(shù)組長(zhǎng)度導(dǎo)致splcie()執(zhí)行有誤
target.length = Math.max(target.length, key)
// 利用數(shù)組的splice變異方法觸發(fā)響應(yīng)式
target.splice(key, 1, val)
return val
}
// key 已經(jīng)存在漏峰，直接修改屬性值
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
const ob = (target: any).__ob__
// target 本身就不是響應(yīng)式數(shù)據(jù), 直接賦值
if (!ob) {
target[key] = val
return val
}
// 對(duì)屬性進(jìn)行響應(yīng)式處理
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}
閱讀以上源碼可知糠悼，vm.$set 的實(shí)現(xiàn)原理是：
如果目標(biāo)是數(shù)組，直接使用數(shù)組的 splice 方法觸發(fā)相應(yīng)式浅乔；
如果目標(biāo)是對(duì)象倔喂，會(huì)先判讀屬性是否存在、對(duì)象是否是響應(yīng)式靖苇，最終如果要對(duì)屬性進(jìn)行響應(yīng)式處理席噩，則是通過(guò)調(diào)用 defineReactive 方法進(jìn)行響應(yīng)式處理（ defineReactive 方法就是 Vue 在初始化對(duì)象時(shí)，給對(duì)象屬性采用 Object.defineProperty 動(dòng)態(tài)添加 getter 和 setter 的功能所調(diào)用的方法）
二十一贤壁、Vue 中的 key 有什么作用悼枢？
key 是為 Vue 中 vnode 的唯一標(biāo)記，通過(guò)這個(gè) key脾拆，我們的 diff 操作可以更準(zhǔn)確馒索、更快速莹妒。
Vue 的 diff 過(guò)程可以概括為：oldCh 和 newCh 各有兩個(gè)頭尾的變量 oldStartIndex、oldEndIndex 和 newStartIndex绰上、newEndIndex旨怠，它們會(huì)新節(jié)點(diǎn)和舊節(jié)點(diǎn)會(huì)進(jìn)行兩兩對(duì)比，即一共有4種比較方式：newStartIndex 和oldStartIndex 蜈块、newEndIndex 和 oldEndIndex 鉴腻、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex百揭，如果以上 4 種比較都沒(méi)匹配拘哨，如果設(shè)置了key，就會(huì)用 key 再進(jìn)行比較信峻，在比較的過(guò)程中，遍歷會(huì)往中間靠瓮床，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一個(gè)已經(jīng)遍歷完了盹舞，就會(huì)結(jié)束比較。
所以 Vue 中 key 的作用是：key 是為 Vue 中 vnode 的唯一標(biāo)記隘庄，通過(guò)這個(gè) key踢步，我們的 diff 操作可以更準(zhǔn)確、更快速丑掺。
更準(zhǔn)確：因?yàn)閹?key 就不是就地復(fù)用了获印，在 sameNode 函數(shù) a.key === b.key 對(duì)比中可以避免就地復(fù)用的情況。所以會(huì)更加準(zhǔn)確街州。
更快速：利用 key 的唯一性生成 map 對(duì)象來(lái)獲取對(duì)應(yīng)節(jié)點(diǎn)兼丰，比遍歷方式更快，源碼如下：
function createKeyToOldIdx (children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}
二十二唆缴、說(shuō)說(shuō)對(duì)于 SSR了解鳍征？有沒(méi)有使用過(guò)？
Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架面徽。默認(rèn)情況下艳丛，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM趟紊。然而氮双，也可以將同一個(gè)組件渲染為服務(wù)端的 HTML 字符串，將它們直接發(fā)送到瀏覽器霎匈，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序戴差。
即：SSR大致的意思就是vue在客戶端將標(biāo)簽渲染成的整個(gè) html 片段的工作在服務(wù)端完成，服務(wù)端形成的html 片段直接返回給客戶端這個(gè)過(guò)程就叫做服務(wù)端渲染唧躲。
優(yōu)點(diǎn)：
更好的 SEO： 因?yàn)?SPA 頁(yè)面的內(nèi)容是通過(guò) Ajax 獲取造挽，而搜索引擎爬取工具并不會(huì)等待 Ajax 異步完成后再抓取頁(yè)面內(nèi)容碱璃，所以在 SPA 中是抓取不到頁(yè)面通過(guò) Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁(yè)面（數(shù)據(jù)已經(jīng)包含在頁(yè)面中）饭入，所以搜索引擎爬取工具可以抓取渲染好的頁(yè)面嵌器；
更快的內(nèi)容到達(dá)時(shí)間（首屏加載更快）： SPA 會(huì)等待所有 Vue 編譯后的 js 文件都下載完成后，才開(kāi)始進(jìn)行頁(yè)面的渲染谐丢，文件下載等需要一定的時(shí)間等爽航，所以首屏渲染需要一定的時(shí)間；SSR 直接由服務(wù)端渲染好頁(yè)面直接返回顯示乾忱，無(wú)需等待下載 js 文件及再去渲染等讥珍，所以 SSR 有更快的內(nèi)容到達(dá)時(shí)間；
缺點(diǎn)：
更多的開(kāi)發(fā)條件限制： 例如服務(wù)端渲染只支持 beforCreate 和 created 兩個(gè)鉤子函數(shù)窄瘟，這會(huì)導(dǎo)致一些外部擴(kuò)展庫(kù)需要特殊處理衷佃，才能在服務(wù)端渲染應(yīng)用程序中運(yùn)行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序 SPA 不同蹄葱，服務(wù)端渲染應(yīng)用程序氏义，需要處于 Node.js server 運(yùn)行環(huán)境；
更多的服務(wù)器負(fù)載：在 Node.js 中渲染完整的應(yīng)用程序图云，顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源惯悠。
二十三、服務(wù)端渲染 SSR or 預(yù)渲染
服務(wù)端渲染是指 Vue 在客戶端將標(biāo)簽渲染成的整個(gè) html 片段的工作在服務(wù)端完成竣况，服務(wù)端形成的 html 片段直接返回給客戶端這個(gè)過(guò)程就叫做服務(wù)端渲染克婶。
1.服務(wù)端渲染的優(yōu)點(diǎn)：
更好的 SEO： 因?yàn)?SPA 頁(yè)面的內(nèi)容是通過(guò) Ajax 獲取，而搜索引擎爬取工具并不會(huì)等待 Ajax 異步完成后再抓取頁(yè)面內(nèi)容丹泉，所以在 SPA 中是抓取不到頁(yè)面通過(guò) Ajax 獲取到的內(nèi)容情萤；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁(yè)面（數(shù)據(jù)已經(jīng)包含在頁(yè)面中），所以搜索引擎爬取工具可以抓取渲染好的頁(yè)面摹恨；
更快的內(nèi)容到達(dá)時(shí)間（首屏加載更快）： SPA 會(huì)等待所有 Vue 編譯后的 js 文件都下載完成后紫岩，才開(kāi)始進(jìn)行頁(yè)面的渲染，文件下載等需要一定的時(shí)間等泉蝌，所以首屏渲染需要一定的時(shí)間揩晴；SSR 直接由服務(wù)端渲染好頁(yè)面直接返回顯示，無(wú)需等待下載 js 文件及再去渲染等硫兰，所以 SSR 有更快的內(nèi)容到達(dá)時(shí)間诅愚；
2.服務(wù)端渲染的缺點(diǎn)：
更多的開(kāi)發(fā)條件限制： 例如服務(wù)端渲染只支持 beforCreate 和 created 兩個(gè)鉤子函數(shù)劫映，這會(huì)導(dǎo)致一些外部擴(kuò)展庫(kù)需要特殊處理刹前，才能在服務(wù)端渲染應(yīng)用程序中運(yùn)行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序 SPA 不同雌桑，服務(wù)端渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境拣技；
更多的服務(wù)器負(fù)載：在 Node.js 中渲染完整的應(yīng)用程序耍目，顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源，因此如果你預(yù)料在高流量環(huán)境下使用莫辨，請(qǐng)準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載毅访，并明智地采用緩存策略俺抽。
如果你的項(xiàng)目的 SEO 和 首屏渲染是評(píng)價(jià)項(xiàng)目的關(guān)鍵指標(biāo)较曼，那么你的項(xiàng)目就需要服務(wù)端渲染來(lái)幫助你實(shí)現(xiàn)最佳的初始加載性能和 SEO捷犹。如果你的 Vue 項(xiàng)目只需改善少數(shù)營(yíng)銷頁(yè)面（例如 /products， /about侣颂， /contact 等）的 SEO枪孩，那么你可能需要預(yù)渲染蔑舞，在構(gòu)建時(shí) (build time) 簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡(jiǎn)單从撼，并可以將你的前端作為一個(gè)完全靜態(tài)的站點(diǎn)钧栖，具體你可以使用 prerender-spa-plugin 就可以輕松地添加預(yù)渲染 婆翔。
二十四、虛擬 DOM 的優(yōu)缺點(diǎn)掏婶？
優(yōu)點(diǎn)：
保證性能下限： 框架的虛擬 DOM 需要適配任何上層 API 可能產(chǎn)生的操作啃奴，它的一些 DOM 操作的實(shí)現(xiàn)必須是普適的纺腊，所以它的性能并不是最優(yōu)的揖膜；但是比起粗暴的 DOM 操作性能要好很多梅桩，因此框架的虛擬 DOM 至少可以保證在你不需要手動(dòng)優(yōu)化的情況下宿百，依然可以提供還不錯(cuò)的性能，即保證性能的下限雀费；
無(wú)需手動(dòng)操作 DOM： 我們不再需要手動(dòng)去操作 DOM盏袄，只需要寫(xiě)好 View-Model 的代碼邏輯辕羽，框架會(huì)根據(jù)虛擬 DOM 和 數(shù)據(jù)雙向綁定垄惧，幫我們以可預(yù)期的方式更新視圖到逊，極大提高我們的開(kāi)發(fā)效率；
跨平臺(tái)： 虛擬 DOM 本質(zhì)上是 JavaScript 對(duì)象,而 DOM 與平臺(tái)強(qiáng)相關(guān)枷踏，相比之下虛擬 DOM 可以進(jìn)行更方便地跨平臺(tái)操作旭蠕，例如服務(wù)器渲染掏熬、weex 開(kāi)發(fā)等等。
缺點(diǎn):
無(wú)法進(jìn)行極致優(yōu)化： 雖然虛擬 DOM + 合理的優(yōu)化舌胶，足以應(yīng)對(duì)絕大部分應(yīng)用的性能需求幔嫂，但在一些性能要求極高的應(yīng)用中虛擬 DOM 無(wú)法進(jìn)行針對(duì)性的極致優(yōu)化誊薄。
二十五呢蔫、虛擬 DOM 實(shí)現(xiàn)原理片吊？
虛擬 DOM 的實(shí)現(xiàn)原理主要包括以下 3 部分：
①用 JavaScript 對(duì)象模擬真實(shí) DOM 樹(shù)，對(duì)真實(shí) DOM 進(jìn)行抽象全谤；
②diff 算法 — 比較兩棵虛擬 DOM 樹(shù)的差異认然；
③pach 算法 — 將兩個(gè)虛擬 DOM 對(duì)象的差異應(yīng)用到真正的 DOM 樹(shù)。
二十六余蟹、Vue 項(xiàng)目?jī)?yōu)化
1.代碼層面的優(yōu)化
v-if 和 v-show 區(qū)分使用場(chǎng)景
computed 和 watch 區(qū)分使用場(chǎng)景
v-for 遍歷必須為 item 添加 key威酒，且避免同時(shí)使用 v-if
長(zhǎng)列表性能優(yōu)化
事件的銷毀
圖片資源懶加載
路由懶加載
第三方插件的按需引入
優(yōu)化無(wú)限列表性能
服務(wù)端渲染 SSR or 預(yù)渲染
2.Webpack 層面的優(yōu)化
Webpack 對(duì)圖片進(jìn)行壓縮
減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼
提取公共代碼
模板預(yù)編譯
提取組件的 CSS
優(yōu)化 SourceMap
構(gòu)建結(jié)果輸出分析
Vue 項(xiàng)目的編譯優(yōu)化
3.基礎(chǔ)的 Web 技術(shù)的優(yōu)化
開(kāi)啟 gzip 壓縮
瀏覽器緩存
CDN 的使用
使用 Chrome Performance 查找性能瓶頸
二十七葵孤、vue3.0 特性的了解
1.監(jiān)測(cè)機(jī)制的改變
Vue3.0 將帶來(lái)基于代理 Proxy 的 observer 實(shí)現(xiàn)尤仍，提供全語(yǔ)言覆蓋的反應(yīng)性跟蹤。這消除了 Vue 2 當(dāng)中基于 Object.defineProperty 的實(shí)現(xiàn)所存在的很多限制：①只能監(jiān)測(cè)屬性苏遥，不能監(jiān)測(cè)對(duì)象田炭；②檢測(cè)屬性的添加和刪除教硫；③檢測(cè)數(shù)組索引和長(zhǎng)度的變更瞬矩；④支持 Map、Set蛤铜、WeakMap 和 WeakSet围肥。
新的 observer 還提供了以下特性：
用于創(chuàng)建 observable 的公開(kāi) API蜂怎。這為中小規(guī)模場(chǎng)景提供了簡(jiǎn)單輕量級(jí)的跨組件狀態(tài)管理解決方案杠步。
默認(rèn)采用惰性觀察幽歼。在 2.x 中，不管反應(yīng)式數(shù)據(jù)有多大诚些，都會(huì)在啟動(dòng)時(shí)被觀察到诬烹。如果你的數(shù)據(jù)集很大绞吁，這可能會(huì)在應(yīng)用啟動(dòng)時(shí)帶來(lái)明顯的開(kāi)銷唬格。在 3.x 中，只觀察用于渲染應(yīng)用程序最初可見(jiàn)部分的數(shù)據(jù)脑沿。
更精確的變更通知庄拇。在 2.x 中韭邓，通過(guò) Vue.set 強(qiáng)制添加新屬性將導(dǎo)致依賴于該對(duì)象的 watcher 收到變更通知女淑。在 3.x 中鸭你，只有依賴于特定屬性的 watcher 才會(huì)收到通知。
不可變的 observable：我們可以創(chuàng)建值的“不可變”版本（即使是嵌套屬性）阁谆，除非系統(tǒng)在內(nèi)部暫時(shí)將其“解禁”场绿。這個(gè)機(jī)制可用于凍結(jié) prop 傳遞或 Vuex 狀態(tài)樹(shù)以外的變化焰盗。
更好的調(diào)試功能：我們可以使用新的 renderTracked 和 renderTriggered 鉤子精確地跟蹤組件在什么時(shí)候以及為什么重新渲染熬拒。
2.模板
模板方面沒(méi)有大的變更垫竞，只改了作用域插槽件甥，2.x 的機(jī)制導(dǎo)致作用域插槽變了引有，父組件會(huì)重新渲染譬正，而 3.0 把作用域插槽改成了函數(shù)的方式，這樣只會(huì)影響子組件的重新渲染粉怕，提升了渲染的性能贫贝。
同時(shí)稚晚，對(duì)于 render 函數(shù)的方面型诚，vue3.0 也會(huì)進(jìn)行一系列更改來(lái)方便習(xí)慣直接使用 api 來(lái)生成 vdom 狰贯。
3.對(duì)象式的組件聲明方式
vue2.x 中的組件是通過(guò)聲明的方式傳入一系列 option涵紊，和 TypeScript 的結(jié)合需要通過(guò)一些裝飾器的方式來(lái)做栖袋，雖然能實(shí)現(xiàn)功能塘幅，但是比較麻煩。3.0 修改了組件的聲明方式踏揣，改成了類式的寫(xiě)法捞稿，這樣使得和 TypeScript 的結(jié)合變得很容易娱局。
此外衰齐，vue 的源碼也改用了 TypeScript 來(lái)寫(xiě)继阻。其實(shí)當(dāng)代碼的功能復(fù)雜之后，必須有一個(gè)靜態(tài)類型系統(tǒng)來(lái)做一些輔助管理〕后。現(xiàn)在 vue3.0 也全面改用 TypeScript 來(lái)重寫(xiě)了趴俘，更是使得對(duì)外暴露的 api 更容易結(jié)合 TypeScript哮幢。靜態(tài)類型系統(tǒng)對(duì)于復(fù)雜代碼的維護(hù)確實(shí)很有必要橙垢。
4.其它方面的更改
vue3.0 的改變是全面的伦糯，上面只涉及到主要的 3 個(gè)方面敛纲，還有一些其它的更改：
支持自定義渲染器淤翔，從而使得 weex 可以通過(guò)自定義渲染器的方式來(lái)擴(kuò)展旁壮，而不是直接 fork 源碼來(lái)改的方式抡谐。
支持 Fragment（多個(gè)根節(jié)點(diǎn)）和 Protal（在 dom 其它部分渲染組建內(nèi)容）組件麦撵，針對(duì)一些特殊的場(chǎng)景做了處理免胃。
基于 treeshaking 優(yōu)化，提供了更多的內(nèi)置功能躺涝。
二十八诞挨、Vue路由跳轉(zhuǎn)方式有哪幾種惶傻？
1.router-link
**不帶參數(shù)**
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意：router-link中鏈接如果是'/'開(kāi)始就是從根路由開(kāi)始银室，如果開(kāi)始不帶'/'蜈敢，則從當(dāng)前路由開(kāi)始抓狭。
帶參數(shù)
<router-link :to="{name:'home', params: {id:1}}">
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query傳參數(shù) (類似get,url后面會(huì)顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id
// script 取參 this.$route.query.id
2.this.$router.push() (函數(shù)里面調(diào)用)
不帶參數(shù)
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
query傳參
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取參 $route.query.id
// script 取參 this.$route.query.id
2.1 params傳參
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
2.2 query和params區(qū)別
query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在
params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失
3.this.$router.replace() (用法同上,push)
4. this.$router.go(n) ()
二十九否过、其它Vue面試題
1.css只在當(dāng)前組件起作用
答：在style標(biāo)簽中寫(xiě)入scoped即可 例如：<style scoped></style>
2.v-if 和 v-show 區(qū)別
答：v-if按照條件是否渲染苗桂，v-show是display的block或none煤伟；
router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法便锨，鉤子函數(shù)等鸿秆。
4.vue.js的兩個(gè)核心是什么卿叽？
答：數(shù)據(jù)驅(qū)動(dòng)恳守、組件系統(tǒng)
5.vue幾種常用的指令
答：v-for 催烘、 v-if 伊群、v-bind、v-on咽袜、v-show询刹、v-else
6.vue常用的修飾符凹联？
答：.prevent: 提交事件不再重載頁(yè)面蔽挠；.stop: 阻止單擊事件冒泡象泵；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)偶惠；.capture: 事件偵聽(tīng)忽孽，事件發(fā)生的時(shí)候會(huì)調(diào)用
7.v-on 可以綁定多個(gè)方法嗎谢床？
答：可以
8.vue中 key 值的作用识腿？
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)渡讼，它默認(rèn)用“就地復(fù)用”策略成箫。如果數(shù)據(jù)項(xiàng)的順序被改變蹬昌，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素昆汹，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素满粗。key的作用主要是為了高效的更新虛擬DOM。
9.什么是vue的計(jì)算屬性准脂？
答：在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)狸膏，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理湾戳，且可能多次使用的情況下砾脑，盡量采取計(jì)算屬性的方式韧衣。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰畅铭；②依賴于數(shù)據(jù)硕噩，數(shù)據(jù)更新炉擅，處理結(jié)果自動(dòng)更新坑资；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時(shí)穆端，直接寫(xiě)計(jì)算屬性名即可袱贮；⑤常用的是getter方法，獲取數(shù)據(jù)，也可以使用set方法改變數(shù)據(jù)攒巍；⑥相較于methods嗽仪，不管依賴的數(shù)據(jù)變不變，methods都會(huì)重新計(jì)算闻坚，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取，不會(huì)重新計(jì)算兢孝。
10.vue等單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎn)
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件窿凤，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM跨蟹、數(shù)據(jù)驅(qū)動(dòng)雳殊、組件化、輕量窗轩、簡(jiǎn)潔夯秃、高效、快速痢艺、模塊友好仓洼。
缺點(diǎn)：不支持低版本的瀏覽器，最低只支持到IE9堤舒；不利于SEO的優(yōu)化（如果要支持SEO色建，建議通過(guò)服務(wù)端來(lái)進(jìn)行渲染組件）；第一次加載首頁(yè)耗時(shí)相對(duì)長(zhǎng)一些舌缤；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)镀岛、后退。
11.怎么定義 vue-router 的動(dòng)態(tài)路由? 怎么獲取傳過(guò)來(lái)的值
答：在 router 目錄下的 index.js 文件中友驮，對(duì) path 屬性加上 /:id漂羊，使用 router 對(duì)象的 params.id 獲取。
三十卸留、有沒(méi)有封裝過(guò)功能組件走越？
面試官：聊聊，你寫(xiě)過(guò)最復(fù)雜的一個(gè)功能組件耻瑟？遇到了哪些困難旨指？最后是怎樣解決的？
