基礎(chǔ)篇?說說你對MVVM的理解
Model-View-ViewModel的縮寫酥宴，Model代表數(shù)據(jù)模型局齿，View代表UI組件,ViewModel將Model和View關(guān)聯(lián)起來
數(shù)據(jù)會綁定到viewModel層并自動將數(shù)據(jù)渲染到頁面中，視圖變化的時候會通知?viewModel層更新數(shù)據(jù)
了解mvc/mvp/mvvm的區(qū)別
Vue2.x響應(yīng)式數(shù)據(jù)/雙向綁定原理
Vue 數(shù)據(jù)雙向綁定主要是指：?數(shù)據(jù)變化更新視圖猜谚，視圖變化更新數(shù)據(jù)胶哲。其中纲岭，View變化更新Data，可以通過事件監(jiān)聽的方式來實現(xiàn)怜瞒，所以 Vue數(shù)據(jù)雙向綁定的工作主要是如何?根據(jù)Data變化更新View父泳。
簡述：
當你把一個普通的 Java 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的 property吴汪，并使用 Object.defineProperty 把這些 property 全部轉(zhuǎn)為 getter/setter惠窄。
這些 getter/setter 對用戶來說是不可見的，但是在內(nèi)部它們讓 Vue 能夠追蹤依賴漾橙，在 property 被訪問和修改時通知變更杆融。
每個組件實例都對應(yīng)一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù) property 記錄為依賴霜运。之后當依賴項的 setter 觸發(fā)時脾歇，會通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染淘捡。
深入理解：
監(jiān)聽器 Observer：對數(shù)據(jù)對象進行遍歷藕各，包括子屬性對象的屬性，利用 Object.defineProperty 對屬性都加上 setter 和 getter焦除。這樣的話激况，給這個對象的某個值賦值，就會觸發(fā) setter，那么就能監(jiān)聽到了數(shù)據(jù)變化乌逐。
解析器 Compile：解析 Vue 模板指令竭讳，將模板中的變量都替換成數(shù)據(jù)，然后初始化渲染頁面視圖黔帕，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)代咸，添加監(jiān)聽數(shù)據(jù)的訂閱者蹈丸，一旦數(shù)據(jù)有變動成黄，收到通知，調(diào)用更新函數(shù)進行數(shù)據(jù)更新逻杖。
訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁 奋岁，主要的任務(wù)是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時荸百，觸發(fā)解析器 Compile 中對應(yīng)的更新函數(shù)闻伶。每個組件實例都有相應(yīng)的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴够话，之后當依賴項的 setter 被調(diào)用時蓝翰，會通知 watcher 重新計算，從而致使它關(guān)聯(lián)的組件得以更新——這是一個典型的觀察者模式
訂閱器 Dep：訂閱器采用 發(fā)布-訂閱 設(shè)計模式女嘲，用來收集訂閱者 Watcher畜份，對監(jiān)聽器 Observer 和 訂閱者 Watcher 進行統(tǒng)一管理。
你知道Vue3.x響應(yīng)式數(shù)據(jù)原理嗎欣尼？
Vue3.x改用Proxy替代Object.defineProperty爆雹。
因為Proxy可以直接監(jiān)聽對象和數(shù)組的變化，并且有多達13種攔截方法愕鼓。并且作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化钙态。
Proxy只會代理對象的第一層，Vue3是怎樣處理這個問題的呢菇晃？
判斷當前Reflect.get的返回值是否為Object册倒，如果是則再通過reactive方法做代理， 這樣就實現(xiàn)了深度觀測磺送。
監(jiān)測數(shù)組的時候可能觸發(fā)多次get/set驻子，那么如何防止觸發(fā)多次呢？我們可以判斷key是否為當前被代理對象target自身屬性册着，也可以判斷舊值與新值是否相等拴孤，只有滿足以上兩個條件之一時，才有可能執(zhí)行trigger甲捏。
Proxy 與 Object.defineProperty 優(yōu)劣對比
Proxy 的優(yōu)勢如下:
Proxy 可以直接監(jiān)聽對象而非屬性演熟；
Proxy 可以直接監(jiān)聽數(shù)組的變化；
Proxy 有多達 13 種攔截方法,不限于 apply、ownKeys芒粹、deleteProperty兄纺、has 等等是 Object.defineProperty 不具備的；
Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改化漆；
Proxy 作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化估脆，也就是傳說中的新標準的性能紅利；
Object.defineProperty 的優(yōu)勢如下:
兼容性好座云，支持 IE9疙赠，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫朦拖。
VUEX篇?Vuex 是什么圃阳？
運用到了js設(shè)計模式中的單例模式，單例模式想要做到的是璧帝，不管我們嘗試去創(chuàng)建多少次捍岳，它都只給你返回第一次所創(chuàng)建的那唯一的一個實例。
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式睬隶。每一個 Vuex 應(yīng)用的核心就是 store（倉庫）锣夹。“store” 基本上就是一個容器苏潜，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )银萍。
Vuex 的狀態(tài)存儲是響應(yīng)式的。當 Vue 組件從 store 中讀取狀態(tài)的時候窖贤，若 store 中的狀態(tài)發(fā)生變化砖顷，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation赃梧。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化滤蝠。
Vuex 使用單一狀態(tài)樹，用一個對象就包含了全部的應(yīng)用層級狀態(tài)授嘀。至此它便作為一個“唯一數(shù)據(jù)源 (SSOT)”而存在物咳。這也意味著，每個應(yīng)用將僅僅包含一個 store 實例蹄皱。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段览闰，在調(diào)試的過程中也能輕易地取得整個當前應(yīng)用狀態(tài)的快照∠镎郏——Vuex官方文檔
主要包括以下幾個模塊：
State：定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)压鉴，可以在這里設(shè)置默認的初始狀態(tài)。
Getter：允許組件從 Store 中獲取數(shù)據(jù)锻拘，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性油吭。
Mutation：是唯一更改 store 中狀態(tài)的方法击蹲，且必須是同步函數(shù)。
Action：用于提交 mutation婉宰，而不是直接變更狀態(tài)歌豺，可以包含任意異步操作。
Module：允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態(tài)樹中心包。
什么情況下使用 Vuex类咧？
如果應(yīng)用夠簡單，最好不要使用 Vuex蟹腾，一個簡單的 store 模式即可
需要構(gòu)建一個中大型單頁應(yīng)用時痕惋，使用Vuex能更好地在組件外部管理狀態(tài)
Vuex和單純的全局對象有什么區(qū)別？
Vuex 的狀態(tài)存儲是響應(yīng)式的岭佳。當 Vue 組件從 store 中讀取狀態(tài)的時候血巍，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新珊随。
不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation柿隙。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化叶洞，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
為什么 Vuex 的 mutation 中不能做異步操作禀崖？
Vuex中所有的狀態(tài)更新的唯一途徑都是mutation衩辟，異步操作通過 Action 來提交 mutation實現(xiàn)，這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化波附，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用艺晴。
每個mutation執(zhí)行完成后都會對應(yīng)到一個新的狀態(tài)變更，這樣devtools就可以打個快照存下來掸屡，然后就可以實現(xiàn) time-travel 了封寞。如果mutation支持異步操作，就沒有辦法知道狀態(tài)是何時更新的仅财，無法很好的進行狀態(tài)的追蹤狈究，給調(diào)試帶來困難。
新增：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ù)荆烈。在這種情況下拯勉，只有當所有觸發(fā)函數(shù)完成后，返回的 Promise 才會執(zhí)行。
新增：為什么不直接分發(fā)mutation,而要通過分發(fā)action之后提交 mutation變更狀態(tài)
mutation 必須同步執(zhí)行谜喊，我們可以在 action 內(nèi)部執(zhí)行異步操作
可以進行一系列的異步操作潭兽，并且通過提交 mutation 來記錄 action 產(chǎn)生的副作用（即狀態(tài)變更）
常規(guī)篇?computed 和 watch 的區(qū)別和運用的場景？
computed：是計算屬性斗遏，依賴其它屬性值山卦，并且 computed 的值有?緩存，只有它?依賴的屬性值發(fā)生改變诵次，下一次獲取 computed 的值時才會重新計算 computed 的值账蓉；
watch：沒有緩存性，更多的是「?觀察」的作用逾一，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) 铸本，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作；當我們需要深度監(jiān)聽對象中的屬性時遵堵，可以打開deep：true選項箱玷，這樣便會對對象中的每一項進行監(jiān)聽
運用場景：
當我們需要進行數(shù)值計算，并且依賴于其它數(shù)據(jù)時陌宿，應(yīng)該使用 computed锡足，因為可以利用 computed 的緩存特性，避免每次獲取值時壳坪，都要重新計算舶得；
當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應(yīng)該使用 watch爽蝴，使用watch選項允許我們執(zhí)行異步操作 ( 訪問一個 API )沐批，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前蝎亚，設(shè)置中間狀態(tài)九孩。這些都是計算屬性無法做到的。
Vue2.x組件通信有哪些方式颖对？
父子組件通信
事件機制(**父->子props,子->父 $on捻撑、$emit )
獲取父子組件實例 $parent、$children
Ref 獲取實例的方式調(diào)用組件的屬性或者方法
Provide缤底、inject (不推薦使用顾患，組件庫時很常用)
兄弟組件通信
Vue.prototype. $bus = new Vue
Vuex
eventBus這種方法通過?一個空的 Vue實例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件个唧，從而實現(xiàn)任何組件間的通信江解，包括父子、隔代徙歼、兄弟組件
跨級組件通信
Vuex
$attrs犁河、$listeners
Provide鳖枕、inject
說一下v-if和v-show的區(qū)別
當條件不成立時，v-if不會渲染DOM元素桨螺，v-show操作的是樣式(display)宾符，切換當前DOM的顯示和隱藏。
v-if 適用于在運行時很少改變條件灭翔，不需要頻繁切換條件的場景魏烫；
v-show 則適用于需要非常頻繁切換條件的場景。
為什么 v-for 和 v-if 不建議用在一起
當 v-for 和 v-if 處于同一個節(jié)點時肝箱，v-for 的優(yōu)先級比 v-if 更高哄褒，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中。如果要遍歷的數(shù)組很大煌张，而真正要展示的數(shù)據(jù)很少時呐赡，這將造成很大的性能浪費
這種場景建議使用 computed，先對數(shù)據(jù)進行過濾
組件中的data為什么是一個函數(shù)骏融？
一個組件被復(fù)用多次的話链嘀，也就會創(chuàng)建多個實例。本質(zhì)上绎谦，這些實例用的都是同一個構(gòu)造函數(shù)管闷。
如果data是對象的話，對象屬于引用類型窃肠，會影響到所有的實例。所以為了保證組件不同的實例之間data不沖突刷允，data必須是一個函數(shù)冤留。
子組件為什么不可以修改父組件傳遞的Prop？/怎么理解vue的單向數(shù)據(jù)流树灶？
Vue提倡單向數(shù)據(jù)流,即父級props的更新會流向子組件,但是反過來則不行纤怒。
這是為了防止意外的改變父組件狀態(tài)，使得應(yīng)用的數(shù)據(jù)流變得難以理解天通。
如果破壞了單向數(shù)據(jù)流泊窘，當應(yīng)用復(fù)雜時，debug 的成本會非常高像寒。
v-model是如何實現(xiàn)雙向綁定的烘豹？
v-model是用來在表單控件或者組件上創(chuàng)建雙向綁定的
他的本質(zhì)是v-bind和v-on的語法糖
在一個組件上使用v-model，默認會為組件綁定名為value的prop和名為input的事件
nextTick的實現(xiàn)原理是什么诺祸？
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)携悯，在修改數(shù)據(jù)之后立即使用 nextTick 來獲取更新后的 DOM。
nextTick主要使用了?宏任務(wù)和?微任務(wù)筷笨。
根據(jù)執(zhí)行環(huán)境分別嘗試采用Promise憔鬼、MutationObserver龟劲、setImmediate，如果以上都不行則采用setTimeout定義了一個異步方法轴或，多次調(diào)用nextTick會將方法存入隊列中昌跌，通過這個異步方法清空當前隊列。
Vue不能檢測數(shù)組的哪些變動照雁？Vue 怎么用?vm.$set?解決對象新增屬性不能響應(yīng)的問題 蚕愤？
Vue 不能檢測以下數(shù)組的變動：
第一類問題
// 法一：Vue.set Vue.set(vm.items, indexOfItem, newValue) // 法二：Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) 復(fù)制代碼
第二類問題，可使用 splice：
vm.items.splice(newLength) 復(fù)制代碼
當你利用索引直接設(shè)置一個數(shù)組項時囊榜，例如：vm.items[indexOfItem] = newValue
當你修改數(shù)組的長度時审胸，例如：vm.items.length = newLength
解決辦法：
vm. $set 的實現(xiàn)原理是：
如果目標是數(shù)組，直接使用數(shù)組的 splice 方法觸發(fā)相應(yīng)式卸勺；
如果目標是對象砂沛，會先判讀屬性是否存在、對象是否是響應(yīng)式曙求，最終如果要對屬性進行響應(yīng)式處理碍庵，則是通過調(diào)用 defineReactive 方法進行響應(yīng)式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調(diào)用的方法）
Vue事件綁定原理是什么悟狱？
原生事件綁定是通過addEventListener綁定給真實元素的静浴，組件事件綁定是通過Vue自定義的 $on 實現(xiàn)的。
說一下虛擬Dom以及key屬性的作用
由于在瀏覽器中操作DOM是很昂貴的挤渐。頻繁的操作DOM苹享，會產(chǎn)生一定的性能問題。這就是虛擬Dom的產(chǎn)生原因浴麻。
Virtual DOM本質(zhì)就是用一個?原生的JS對象去描述一個DOM節(jié)點得问。是對真實DOM的一層抽象。(也就是源碼中的VNode類软免，它定義在src/core/vdom/vnode.js中宫纬。)
虛擬 DOM 的實現(xiàn)原理主要包括以下 3 部分：
用 Java 對象模擬真實 DOM 樹，對真實 DOM 進行抽象膏萧；
diff 算法 — 比較兩棵虛擬 DOM 樹的差異漓骚；
pach 算法 — 將兩個虛擬 DOM 對象的差異應(yīng)用到真正的 DOM 樹。
key 是為 Vue 中 vnode 的唯一標記榛泛，通過這個 key蝌蹂，我們的 diff 操作可以更準確、更快速
更準確：因為帶 key 就不是就地復(fù)用了挟鸠，在 sameNode 函數(shù)a.key === b.key對比中可以避免就地復(fù)用的情況叉信。所以會更加準確。
更快速：利用 key 的唯一性生成 map 對象來獲取對應(yīng)節(jié)點艘希，比遍歷方式更快
為什么不建議用index作為key?
不建議 用index 作為 key硼身，和沒寫基本上沒區(qū)別硅急，因為不管你數(shù)組的順序怎么顛倒，index 都是 0, 1, 2 這樣排列佳遂，導(dǎo)致 Vue 會復(fù)用錯誤的舊子節(jié)點营袜，做很多額外的工作
生命周期篇?說一下你對Vue的生命周期的理解
簡單回答
beforeCreate、created丑罪、beforeMount荚板、mounted、beforeUpdate吩屹、updated跪另、beforeDestroy、destroyed煤搜。
keep-alive 有自己獨立的鉤子函數(shù) activated 和 deactivated免绿。
復(fù)雜回答
|生命周期
發(fā)生了什么
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activited keep-alive 專屬
deactivated keep-alive 專屬
Vue中組件生命周期調(diào)用順序是什么樣的？
組件的調(diào)用順序都是先父后子,渲染完成的順序是先子后父擦盾。
組件的銷毀操作是先父后子嘲驾，銷毀完成的順序是先子后父。
在什么階段才能訪問操作DOM迹卢？
在鉤子函數(shù) mounted 被調(diào)用前辽故，Vue 已經(jīng)將編譯好的模板掛載到頁面上，所以在 mounted 中可以訪問操作 DOM腐碱。
你的接口請求一般放在哪個生命周期中誊垢？
可以在鉤子函數(shù) created、beforeMount症见、mounted 中進行調(diào)用彤枢，因為在這三個鉤子函數(shù)中，data 已經(jīng)創(chuàng)建筒饰，可以將服務(wù)端端返回的數(shù)據(jù)進行賦值。
但是推薦在 created 鉤子函數(shù)中調(diào)用異步請求壁晒，因為在 created 鉤子函數(shù)中調(diào)用異步請求有以下優(yōu)點：
能更快獲取到服務(wù)端數(shù)據(jù)瓷们，減少頁面loading 時間；
ssr不支持 beforeMount 秒咐、mounted 鉤子函數(shù)谬晕，所以放在 created 中有助于一致性；
路由篇?vue路由hash模式和history模式實現(xiàn)原理分別是什么携取，他們的區(qū)別是什么攒钳？
hash 模式：
#后面 hash 值的變化，不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求雷滋，瀏覽器不發(fā)出請求不撑，就不會刷新頁面
通過監(jiān)聽?hashchange事件可以知道 hash 發(fā)生了哪些變化，然后根據(jù) hash 變化來實現(xiàn)更新頁面部分內(nèi)容的操作。
history 模式：
history 模式的實現(xiàn)番挺，主要是 HTML5 標準發(fā)布的兩個 API囱晴，?pushState和?replaceState，這兩個 API 可以在改變 url实愚，但是不會發(fā)送請求兼呵。這樣就可以監(jiān)聽 url 變化來實現(xiàn)更新頁面部分內(nèi)容的操作
區(qū)別
url 展示上，hash 模式有“#”腊敲，history 模式?jīng)]有
刷新頁面時击喂，hash 模式可以正常加載到 hash 值對應(yīng)的頁面，而 history 沒有處理的話碰辅，會返回 404懂昂，一般需要后端將所有頁面都配置重定向到首頁路由
兼容性，hash 可以支持低版本瀏覽器和 IE乎赴。
路由懶加載是什么意思忍法？如何實現(xiàn)路由懶加載？
路由懶加載的含義：把不同路由對應(yīng)的組件分割成不同的代碼塊榕吼，然后當路由被訪問的時候才加載對應(yīng)組件
實現(xiàn)：結(jié)合 Vue 的異步組件和 Webpack 的代碼分割功能
1. 可以將異步組件定義為返回一個 Promise 的工廠函數(shù) (該函數(shù)返回的 Promise 應(yīng)該 resolve 組件本身)
const Foo = => Promise.resolve({ /* 組件定義對象 */ }) 復(fù)制代碼
2. 在 Webpack 2 中饿序，我們可以使用動態(tài) import語法來定義代碼分塊點 (split point)
import('./Foo.vue') // 返回 Promise 復(fù)制代碼
結(jié)合這兩者，這就是如何定義一個能夠被 Webpack 自動代碼分割的異步組件
const Foo = => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]}) 復(fù)制代碼
使用命名 chunk羹蚣，和webpack中的魔法注釋就可以把某個路由下的所有組件都打包在同個異步塊 (chunk) 中
chunkconst Foo = => import(/* webpackChunkName: "group-foo" */ './Foo.vue') 復(fù)制代碼
Vue-router 導(dǎo)航守衛(wèi)有哪些
全局前置/鉤子：beforeEach原探、beforeResolve、afterEach
路由獨享的守衛(wèi)：beforeEnter
組件內(nèi)的守衛(wèi)：beforeRouteEnter顽素、beforeRouteUpdate咽弦、beforeRouteLeave
進階篇?說說vue和react的異同
同
使用 Virtual DOM
提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。
將注意力集中保持在核心庫胁出，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫型型。
異
在 React 應(yīng)用中，當某個組件的狀態(tài)發(fā)生變化時全蝶，它會以該組件為根闹蒜，重新渲染整個組件子樹（除非使用PureComponent/shouldComponentUpdate），在 Vue 應(yīng)用中抑淫，組件的依賴是在渲染過程中自動追蹤的绷落，所以系統(tǒng)能精確知曉哪個組件確實需要被重渲染
在 React 中，一切都是 Java始苇。不僅僅是 HTML 可以用 JSX 來表達砌烁，現(xiàn)在的潮流也越來越多地將 CSS 也納入到 Java 中來處理
Vue 的路由庫和狀態(tài)管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區(qū)維護催式，因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng)函喉，所以有更豐富的生態(tài)系統(tǒng)
Vue 提供了CLI 腳手架避归，能讓你通過交互式的腳手架引導(dǎo)非常容易地構(gòu)建項目。你甚至可以使用它快速開發(fā)組件的原型函似。React 在這方面也提供了create-react-app槐脏，但是現(xiàn)在還存在一些局限性
React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP，Vue 和Weex會進行官方合作撇寞，Weex 是阿里巴巴發(fā)起的跨平臺用戶界面開發(fā)框架顿天，同時也正在 Apache 基金會進行項目孵化，另一個選擇是Native-Vue蔑担，一個用 Vue.js 構(gòu)建完全原生應(yīng)用的Native插件
什么是 mixin 牌废？
Mixin 使我們能夠為 Vue 組件編寫可插拔和可重用的功能。
如果你希望再多個組件之間重用一組組件選項啤握，例如生命周期 hook鸟缕、 方法等，則可以將其編寫為 mixin排抬，并在組件中簡單的引用它懂从。
然后將 mixin 的內(nèi)容合并到組件中。如果你要在 mixin 中定義生命周期 hook蹲蒲，那么它在執(zhí)行時將優(yōu)化于組件自已的 hook番甩。
在 Vue 實例中編寫生命周期 hook 或其他 option/properties 時，為什么不使用箭頭函數(shù) 届搁？
箭頭函數(shù)自已沒有定義 this 上下文中缘薛。
當你在 Vue 程序中使用箭頭函數(shù) ( => ) 時，this 關(guān)鍵字病不會綁定到 Vue 實例卡睦，因此會引發(fā)錯誤宴胧。所以強烈建議改用標準函數(shù)聲明。
Vue模版編譯原理知道嗎表锻，能簡單說一下嗎恕齐？
簡單說，Vue的編譯過程就是將template轉(zhuǎn)化為render函數(shù)的過程瞬逊。會經(jīng)歷以下階段（生成AST樹/優(yōu)化/codegen）：
首先解析模版檐迟，生成AST語法樹(一種用Java對象的形式來描述整個模板)。使用大量的正則表達式對模板進行解析码耐，遇到標簽、文本的時候都會執(zhí)行對應(yīng)的鉤子進行相關(guān)處理溶其。
Vue的數(shù)據(jù)是響應(yīng)式的骚腥，但其實模板中并不是所有的數(shù)據(jù)都是響應(yīng)式的。有一些數(shù)據(jù)首次渲染后就不會再變化瓶逃，對應(yīng)的DOM也不會變化束铭。那么優(yōu)化過程就是深度遍歷AST樹廓块，按照相關(guān)條件對樹節(jié)點進行標記。這些被標記的節(jié)點(靜態(tài)節(jié)點)我們就可以跳過對它們的比對契沫，對運行時的模板起到很大的優(yōu)化作用带猴。
編譯的最后一步是將優(yōu)化后的AST樹轉(zhuǎn)換為可執(zhí)行的代碼。
diff算法說一下
同級比較懈万，再比較子節(jié)點
先判斷一方有子節(jié)點一方?jīng)]有子節(jié)點的情況(如果新的children沒有子節(jié)點拴清，將舊的子節(jié)點移除)
比較都有子節(jié)點的情況(核心diff)
遞歸比較子節(jié)點
說說你對keep-alive組件的了解
keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)会通，避免重新渲染 口予，其有以下特性：
一般結(jié)合路由和動態(tài)組件一起使用，用于緩存組件涕侈；
提供 include 和 exclude 屬性沪停，兩者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存裳涛，exclude 表示任何名稱匹配的組件都不會被緩存 木张，其中 exclude 的優(yōu)先級比 include 高；
對應(yīng)兩個鉤子函數(shù) activated 和 deactivated 端三，當組件被激活時舷礼，觸發(fā)鉤子函數(shù) activated，當組件被移除時技肩，觸發(fā)鉤子函數(shù) deactivated且轨。
說說你對SSR的了解
SSR也就是服務(wù)端渲染，也就是將Vue在客戶端把標簽渲染成HTML的工作放在服務(wù)端完成虚婿，然后再把html直接返回給客戶端
SSR的優(yōu)勢
更好的SEO
首屏加載速度更快
SSR的缺點
開發(fā)條件會受到限制旋奢，服務(wù)器端渲染只支持beforeCreate和created兩個鉤子
當我們需要一些外部擴展庫時需要特殊處理，服務(wù)端渲染應(yīng)用程序也需要處于Node.js的運行環(huán)境
更多的服務(wù)端負載
你都做過哪些Vue的性能優(yōu)化然痊？
編碼階段
盡量減少data中的數(shù)據(jù)至朗，data中的數(shù)據(jù)都會增加getter和setter，會收集對應(yīng)的watcher
v-if和v-for不能連用
如果需要使用v-for給每項元素綁定事件時使用事件代理
SPA 頁面采用keep-alive緩存組件
在更多的情況下剧浸，使用v-if替代v-show
key保證唯一
使用路由懶加載锹引、異步組件
防抖、節(jié)流
第三方模塊按需導(dǎo)入
長列表滾動到可視區(qū)域動態(tài)加載
圖片懶加載
SEO優(yōu)化
預(yù)渲染
服務(wù)端渲染SSR
打包優(yōu)化
壓縮代碼
Tree Shaking/Scope Hoisting
使用cdn加載第三方模塊
多線程打包happypack
splitChunks抽離公共文件
sourceMap優(yōu)化
用戶體驗
骨架屏
PWA
還可以使用緩存(客戶端緩存唆香、服務(wù)端緩存)優(yōu)化嫌变、服務(wù)端開啟gzip壓縮等。
vue2.x中如何監(jiān)測數(shù)組變化躬它？
使用了函數(shù)劫持的方式腾啥，重寫了數(shù)組的方法，Vue將data中的數(shù)組進行了原型鏈重寫，指向了自己定義的數(shù)組原型方法倘待，當調(diào)用數(shù)組api時疮跑，可以通知依賴更新。
如果數(shù)組中包含著引用類型凸舵，會對數(shù)組中的引用類型再次遞歸遍歷進行監(jiān)控祖娘。這樣就實現(xiàn)了監(jiān)測數(shù)組變化。
說說你對 SPA 單頁面的理解啊奄，它的優(yōu)缺點分別是什么渐苏？
SPA（ single-page application ）僅在 Web 頁面初始化時加載相應(yīng)的 HTML、Java 和 CSS增热。一旦頁面加載完成整以，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機制實現(xiàn) HTML 內(nèi)容的變換峻仇，UI 與用戶的交互公黑，避免頁面的重新加載。
優(yōu)點：
用戶體驗好摄咆、快凡蚜，內(nèi)容的改變不需要重新加載整個頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染吭从；
基于上面一點朝蜘，SPA 相對對服務(wù)器壓力小涩金；
前后端職責分離谱醇，架構(gòu)清晰，前端進行交互邏輯步做，后端負責數(shù)據(jù)處理副渴；
缺點：
初次加載耗時多：為實現(xiàn)單頁 Web 應(yīng)用功能及顯示效果，需要在加載頁面的時候?qū)?Java全度、CSS 統(tǒng)一加載煮剧，部分頁面按需加載；
前進后退路由管理：由于單頁應(yīng)用在一個頁面中顯示所有的內(nèi)容将鸵，所以不能使用瀏覽器的前進后退功能勉盅，所有的頁面切換需要自己建立堆棧管理；
SEO 難度較大：由于所有的內(nèi)容都在一個頁面中動態(tài)替換顯示顶掉，所以在 SEO 上其有著天然的弱勢草娜。
對于即將到來的 vue3.0 特性你有什么了解的嗎？
監(jiān)測機制的改變
3.0 將帶來基于代理 Proxy的 observer 實現(xiàn)痒筒，提供全語言覆蓋的反應(yīng)性跟蹤驱还。
消除了 Vue 2 當中基于 Object.defineProperty 的實現(xiàn)所存在的很多限制：
只能監(jiān)測屬性嗜暴，不能監(jiān)測對象
檢測屬性的添加和刪除；
檢測數(shù)組索引和長度的變更议蟆；
支持 Map、Set萎战、WeakMap 和 WeakSet咐容。
模板
模板方面沒有大的變更，只改了作用域插槽蚂维，2.x 的機制導(dǎo)致作用域插槽變了戳粒，父組件會重新渲染，而 3.0 把作用域插槽改成了函數(shù)的方式虫啥，這樣只會影響子組件的重新渲染蔚约，提升了渲染的性能。
同時涂籽，對于 render 函數(shù)的方面苹祟，vue3.0 也會進行一系列更改來方便習慣直接使用 api 來生成 vdom 。
對象式的組件聲明方式
vue2.x 中的組件是通過聲明的方式傳入一系列 option评雌，和 Type 的結(jié)合需要通過一些裝飾器的方式來做树枫，雖然能實現(xiàn)功能，但是比較麻煩景东。
3.0 修改了組件的聲明方式砂轻，改成了類式的寫法，這樣使得和 Type 的結(jié)合變得很容易
其它方面的更改
支持自定義渲染器斤吐，從而使得 weex 可以通過自定義渲染器的方式來擴展搔涝，而不是直接 fork 源碼來改的方式。
支持 Fragment（多個根節(jié)點）和 Protal（在 dom 其他部分渲染組建內(nèi)容）組件和措，針對一些特殊的場景做了處理庄呈。
基于 tree shaking 優(yōu)化，提供了更多的內(nèi)置功能臼婆。
