作者：游蕩de蝌蚪
https://segmentfault.com/a/1190000018634744
前幾天整理了一些 html + css + JavaScript 常見的面試題（https://segmentfault.com/u/youdangde_5c8b208a23f95/articles），然后現(xiàn)在也是找了一些在 Vue 方面經(jīng)常出現(xiàn)的面試題，留給自己查看消化，也分享給有需要的小伙伴。
如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處，還請看到的小伙伴留言指正，先行謝過。
以下 ↓
vue 實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合“發(fā)布者 - 訂閱者”模式的方式，通過 Object.defineProperty() 來劫持各個(gè)屬性的 setter、 getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。
單向數(shù)據(jù)流： 顧名思義，數(shù)據(jù)流是單向的。數(shù)據(jù)流動(dòng)方向可以跟蹤，流動(dòng)單一，追查問題的時(shí)候可以更快捷。缺點(diǎn)就是寫起來不太方便。要使 UI 發(fā)生變更就必須創(chuàng)建各種 action 來維護(hù)對應(yīng)的 state。
雙向數(shù)據(jù)綁定：數(shù)據(jù)之間是相通的，將數(shù)據(jù)變更的操作隱藏在框架內(nèi)部。優(yōu)點(diǎn)是在表單交互較多的場景下，會(huì)簡化大量與業(yè)務(wù)無關(guān)的代碼。缺點(diǎn)就是無法追蹤局部狀態(tài)的變化，增加了出錯(cuò)時(shí) debug 的難度。
vue-router 默認(rèn)使用 hash 模式，所以在路由加載的時(shí)候，項(xiàng)目中的 URL 會(huì)自帶 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一種模式 history：
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是，當(dāng)我們啟用 history 模式的時(shí)候，由于我們的項(xiàng)目是一個(gè)單頁面應(yīng)用，所以在路由跳轉(zhuǎn)的時(shí)候，就會(huì)出現(xiàn)訪問不到靜態(tài)資源而出現(xiàn) “404” 的情況，這時(shí)候就需要服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) “index.html” 頁面。
MVC
特點(diǎn)：
View 傳送指令到 Controller；
Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)；
Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋。
所有通信都是單向的。
MVVM
特點(diǎn)：
各部分之間的通信，都是雙向的；
采用雙向綁定： View 的變動(dòng)，自動(dòng)反映在 ViewModel，反之亦然。
Vue 實(shí)例有一個(gè)完整的生命周期，生命周期也就是指一個(gè)實(shí)例從開始創(chuàng)建到銷毀的這個(gè)過程。
beforeCreated()：在實(shí)例創(chuàng)建之間執(zhí)行，數(shù)據(jù)未加載狀態(tài)。
created()：在實(shí)例創(chuàng)建、數(shù)據(jù)加載后，能初始化數(shù)據(jù)，DOM 渲染之前執(zhí)行。
beforeMount()：虛擬 DOM 已創(chuàng)建完成，在數(shù)據(jù)渲染前最后一次更改數(shù)據(jù)。
mounted()：頁面、數(shù)據(jù)渲染完成，真實(shí) DOM 掛載完成。
beforeUpadate()：重新渲染之前觸發(fā)。
updated()：數(shù)據(jù)已經(jīng)更改完成，DOM 也重新 render 完成，更改數(shù)據(jù)會(huì)陷入死循環(huán)。
beforeDestory() 和 destoryed()：前者是銷毀前執(zhí)行（實(shí)例仍然完全可用），后者則是銷毀后執(zhí)行。
父組件向子組件通信
子組件通過 props 屬性，綁定父組件數(shù)據(jù)，實(shí)現(xiàn)雙方通信。
子組件向父組件通信
將父組件的事件在子組件中通過 $emit 觸發(fā)。
非父子組件、兄弟組件之間的數(shù)據(jù)傳遞
/*新建一個(gè)Vue實(shí)例作為中央事件總嫌*/
let event = new Vue();
/*監(jiān)聽事件*/
event.$on('eventName', (val) => {
//......do something
});
/*觸發(fā)事件*/
event.$emit('eventName', 'this is a message.')
路由就是用來跟后端服務(wù)器進(jìn)行交互的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。
使用 v-if 的時(shí)候，如果值為 false ，那么頁面將不會(huì)有這個(gè) html 標(biāo)簽生成。
v-show 則是不管值為 true 還是 false ， html 元素都會(huì)存在，只是 CSS 中的 display顯示或隱藏。
$router 為 VueRouter 實(shí)例，想要導(dǎo)航到不同 URL，則使用 $router.push 方法。
$route 為當(dāng)前 router 跳轉(zhuǎn)對象里面可以獲取 name 、 path 、 query 、 params 等。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM。
具體可參考官方文檔：深入響應(yīng)式原理(https://cn.vuejs.org/v2/guide/reactivity.html)。
因?yàn)?JS 本身的特性帶來的，如果 data 是一個(gè)對象，那么由于對象本身屬于引用類型，當(dāng)我們修改其中的一個(gè)屬性時(shí)，會(huì)影響到所有 Vue 實(shí)例的數(shù)據(jù)。如果將 data 作為一個(gè)函數(shù)返回一個(gè)對象，那么每一個(gè)實(shí)例的 data 屬性都是獨(dú)立的，不會(huì)相互影響了。
我們可以將同一函數(shù)定義為一個(gè) method 或者一個(gè)計(jì)算屬性。對于最終的結(jié)果，兩種方式是相同的。
不同點(diǎn)：
computed：計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。
method：只要發(fā)生重新渲染， method 調(diào)用總會(huì)執(zhí)行該函數(shù)。
jQuery 專注視圖層，通過操作 DOM 去實(shí)現(xiàn)頁面的一些邏輯渲染； Vue 專注于數(shù)據(jù)層，通過數(shù)據(jù)的雙向綁定，最終表現(xiàn)在 DOM 層面，減少了 DOM 操作。
Vue 使用了組件化思想，使得項(xiàng)目子集職責(zé)清晰，提高了開發(fā)效率，方便重復(fù)利用，便于協(xié)同開發(fā)。
全局注冊
// 注冊一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注冊
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
參考官方文檔：自定義指令(https://cn.vuejs.org/v2/guide/custom-directive.html)。
可以用全局方法 Vue.filter() 注冊一個(gè)自定義過濾器，它接收兩個(gè)參數(shù)：過濾器 ID 和過濾器函數(shù)。過濾器函數(shù)以值為參數(shù)，返回轉(zhuǎn)換后的值。
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text='message | reverse'></span>
過濾器也同樣接受全局注冊和局部注冊。
keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。
<keep-alive>
<component>
<!-- 該組件將被緩存！ -->
</component>
</keep-alive>
可以使用 API 提供的 props，實(shí)現(xiàn)組件的動(dòng)態(tài)緩存。
具體參考官方API(https://cn.vuejs.org/v2/api/#keep-alive)。
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時(shí)辨識 VNodes。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。
有相同父元素的子元素必須有獨(dú)特的 key。重復(fù)的 key 會(huì)造成渲染錯(cuò)誤。
具體參考官方API(https://cn.vuejs.org/v2/api/#key)。
數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)。
優(yōu)點(diǎn)
良好的交互體驗(yàn)
良好的前后端工作分離模式
減輕服務(wù)器壓力
缺點(diǎn)
SEO 難度較高
前進(jìn)、后退管理
初次加載耗時(shí)多
整理的過程也是重新梳理知識點(diǎn)的過程，途中會(huì)發(fā)現(xiàn)很多自己理解不是很到位的東西，也算是一種收獲吧。
后面會(huì)一直不定期更新一些其他方面的面試題或者遇到的有趣的東西，感興趣的小伙伴可以關(guān)注哦。
完整版面試題：https://github.com/ltadpoles/web-document/tree/master/Other
遇見更優(yōu)秀的自己，從現(xiàn)在開始！
以上。
●編號944，輸入編號直達(dá)本文
●輸入m獲取文章目錄
聯(lián)系客服
