vue前端面試題知識點整理
1. 說一下Vue的雙向綁定數(shù)據(jù)的原理
vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式垮兑，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應監(jiān)聽回調(diào)
2. 解釋單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定
單向數(shù)據(jù)流： 顧名思義，數(shù)據(jù)流是單向的助币。數(shù)據(jù)流動方向可以跟蹤抚芦，流動單一，追查問題的時候可以更快捷。缺點就是寫起來不太方便。要使UI發(fā)生變更就必須創(chuàng)建各種action來維護對應的state
雙向數(shù)據(jù)綁定：數(shù)據(jù)之間是相通的倡勇，將數(shù)據(jù)變更的操作隱藏在框架內(nèi)部夸浅。優(yōu)點是在表單交互較多的場景下亿胸，會簡化大量與業(yè)務無關(guān)的代碼。缺點就是無法追蹤局部狀態(tài)的變化，增加了出錯時debug的難度
3. Vue 如何去除url中的#
vue-router默認使用hash模式友绝，所以在路由加載的時候粘室，項目中的url會自帶#海雪。如果不想使用#锦爵， 可以使用vue-router的另一種模式history
newRouter({mode:'history',routes: [ ]})
需要注意的是，當我們啟用history模式的時候奥裸，由于我們的項目是一個單頁面應用迷郑，所以在路由跳轉(zhuǎn)的時候霸妹，就會出現(xiàn)訪問不到靜態(tài)資源而出現(xiàn)404的情況台盯，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態(tài)資源痊银，則應該返回同一個index.html頁面
4. 對 MVC、MVVM的理解
MVC
特點：
View傳送指令到Controller
Controller完成業(yè)務邏輯后号显，要求Model改變狀態(tài)
Model將新的數(shù)據(jù)發(fā)送到View臭猜，用戶得到反饋
所有通信都是單向的
MVVM
特點：
各部分之間的通信，都是雙向的
采用雙向綁定：View的變動押蚤，自動反映在ViewModel蔑歌，反之亦然
具體請移步這里
5. 介紹虛擬DOM
6. vue生命周期的理解
vue實例有一個完整的生命周期，生命周期也就是指一個實例從開始創(chuàng)建到銷毀的這個過程
beforeCreated()在實例創(chuàng)建之間執(zhí)行揽碘，數(shù)據(jù)未加載狀態(tài)
created()在實例創(chuàng)建次屠、數(shù)據(jù)加載后，能初始化數(shù)據(jù)雳刺，dom渲染之前執(zhí)行
beforeMount()虛擬dom已創(chuàng)建完成劫灶，在數(shù)據(jù)渲染前最后一次更改數(shù)據(jù)
mounted()頁面、數(shù)據(jù)渲染完成掖桦，真實dom掛載完成
beforeUpadate()重新渲染之前觸發(fā)
updated()數(shù)據(jù)已經(jīng)更改完成本昏，dom也重新render完成,更改數(shù)據(jù)會陷入死循環(huán)
beforeDestory()和destoryed()前者是銷毀前執(zhí)行（實例仍然完全可用），后者則是銷毀后執(zhí)行
7. 組件通信
父組件向子組件通信
子組件通過props屬性枪汪，綁定父組件數(shù)據(jù)涌穆，實現(xiàn)雙方通信
子組件向父組件通信
將父組件的事件在子組件中通過$emit觸發(fā)
非父子組件、兄弟組件之間的數(shù)據(jù)傳遞
/*新建一個Vue實例作為中央事件總嫌*/letevent =newVue();/*監(jiān)聽事件*/event.$on('eventName', (val) => {//......do something});/*觸發(fā)事件*/event.$emit('eventName','this is a message.')
Vuex 數(shù)據(jù)管理
8. vue-router 路由實現(xiàn)
路由就是用來跟后端服務器進行交互的一種方式雀久，通過不同的路徑宿稀，來請求不同的資源，請求不同的頁面是路由的其中一種功能
參考這里
9. v-if 和 v-show 區(qū)別
使用了v-if的時候赖捌，如果值為false祝沸，那么頁面將不會有這個html標簽生成。
v-show則是不管值為true還是false，html元素都會存在奋隶，只是CSS中的display顯示或隱藏
10. $route和$router的區(qū)別
$router為VueRouter實例擂送，想要導航到不同URL，則使用$router.push方法
$route為當前router跳轉(zhuǎn)對象里面可以獲取name唯欣、path嘹吨、query、params等
11. NextTick 是做什么的
$nextTick是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)境氢，在修改數(shù)據(jù)之后使用$nextTick蟀拷，則可以在回調(diào)中獲取更新后的DOM
具體可參考官方文檔深入響應式原理
12. Vue 組件 data 為什么必須是函數(shù)
因為js本身的特性帶來的，如果data是一個對象萍聊，那么由于對象本身屬于引用類型问芬，當我們修改其中的一個屬性時，會影響到所有Vue實例的數(shù)據(jù)寿桨。如果將data作為一個函數(shù)返回一個對象此衅，那么每一個實例的data屬性都是獨立的，不會相互影響了
13. 計算屬性computed 和事件 methods 有什么區(qū)別
我們可以將同一函數(shù)定義為一個method或者一個計算屬性亭螟。對于最終的結(jié)果挡鞍，兩種方式是相同的
不同點：
computed: 計算屬性是基于它們的依賴進行緩存的,只有在它的相關(guān)依賴發(fā)生改變時才會重新求值
對于method，只要發(fā)生重新渲染预烙，method調(diào)用總會執(zhí)行該函數(shù)
14. 對比 jQuery 墨微，Vue 有什么不同
jQuery 專注視圖層，通過操作 DOM 去實現(xiàn)頁面的一些邏輯渲染扁掸； Vue 專注于數(shù)據(jù)層翘县，通過數(shù)據(jù)的雙向綁定，最終表現(xiàn)在 DOM 層面谴分，減少了 DOM 操作
Vue 使用了組件化思想锈麸，使得項目子集職責清晰，提高了開發(fā)效率狸剃，方便重復利用掐隐，便于協(xié)同開發(fā)
15. Vue 中怎么自定義指令
全局注冊
// 注冊一個全局自定義指令 `v-focus`Vue.directive('focus', {// 當被綁定的元素插入到 DOM 中時……inserted:function(el){// 聚焦元素el.focus()? }})
局部注冊
directives: {focus: {// 指令的定義inserted:function(el){? ? ? el.focus()? ? }? }}
16. Vue 中怎么自定義過濾器
可以用全局方法Vue.filter()注冊一個自定義過濾器，它接收兩個參數(shù)：過濾器ID和過濾器函數(shù)钞馁。過濾器函數(shù)以值為參數(shù)虑省，返回轉(zhuǎn)換后的值
Vue.filter('reverse',function(value){returnvalue.split('').reverse().join('')})
<!-- 'abc' => 'cba' --><spanv-text="message | reverse"></span>
過濾器也同樣接受全局注冊和局部注冊
17. 對 keep-alive 的了解
keep-alive是Vue內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)僧凰，或避免重新渲染
<keep-alive><component><!-- 該組件將被緩存探颈！ --></component></keep-alive>
可以使用API提供的props，實現(xiàn)組件的動態(tài)緩存
具體參考官方API
18. Vue 中 key 的作用
key的特殊屬性主要用在Vue的虛擬DOM算法训措，在新舊nodes對比時辨識VNodes伪节。如果不使用key光羞，Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復/再利用相同類型元素的算法。使用key怀大，它會基于key的變化重新排列元素順序纱兑，并且會移除key不存在的元素。
有相同父元素的子元素必須有獨特的key化借。重復的key會造成渲染錯誤
具體參考官方API
19. Vue 的核心是什么
數(shù)據(jù)驅(qū)動 組件系統(tǒng)
20. vue 等單頁面應用的優(yōu)缺點
優(yōu)點：
良好的交互體驗
良好的前后端工作分離模式
減輕服務器壓力
缺點：
SEO難度較高
前進潜慎、后退管理
初次加載耗時多
