vue前端面試題知識點整理
1. 說一下Vue的雙向綁定數據的原理
vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調
2. 解釋單向數據流和雙向數據綁定
單向數據流： 顧名思義，數據流是單向的。數據流動方向可以跟蹤，流動單一，追查問題的時候可以更快捷。缺點就是寫起來不太方便。要使UI發生變更就必須創建各種action來維護對應的state雙向數據綁定：數據之間是相通的，將數據變更的操作隱藏在框架內部。優點是在表單交互較多的場景下，會簡化大量與業務無關的代碼。缺點就是無法追蹤局部狀態的變化，增加了出錯時
debug的難度
3. Vue 如何去除url中的 #
vue-router 默認使用 hash 模式，所以在路由加載的時候，項目中的 url 會自帶 #。如果不想使用 #， 可以使用 vue-router 的另一種模式 history
new Router({ mode: 'history', routes: [ ] })需要注意的是，當我們啟用history模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現404的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態資源，則應該返回同一個index.html頁面
4. 對 MVC、MVVM的理解
MVC
特點：
View傳送指令到ControllerController完成業務邏輯后，要求Model改變狀態Model將新的數據發送到View，用戶得到反饋
所有通信都是單向的
MVVM
特點：
- 各部分之間的通信，都是雙向的
- 采用雙向綁定：
View的變動，自動反映在ViewModel，反之亦然
具體請移步 這里
5. 介紹虛擬DOM
6. vue生命周期的理解
vue實例有一個完整的生命周期，生命周期也就是指一個實例從開始創建到銷毀的這個過程
beforeCreated()在實例創建之間執行，數據未加載狀態created()在實例創建、數據加載后，能初始化數據，dom渲染之前執行beforeMount()虛擬dom已創建完成，在數據渲染前最后一次更改數據mounted()頁面、數據渲染完成，真實dom掛載完成beforeUpadate()重新渲染之前觸發updated()數據已經更改完成，dom也重新render完成,更改數據會陷入死循環beforeDestory()和destoryed()前者是銷毀前執行（實例仍然完全可用），后者則是銷毀后執行
7. 組件通信
父組件向子組件通信
子組件通過 props 屬性，綁定父組件數據，實現雙方通信
子組件向父組件通信
將父組件的事件在子組件中通過 $emit 觸發
非父子組件、兄弟組件之間的數據傳遞
/*新建一個Vue實例作為中央事件總嫌*/ let event = new Vue(); /*監聽事件*/ event.$on('eventName', (val) => { //......do something }); /*觸發事件*/ event.$emit('eventName', 'this is a message.')Vuex 數據管理
8. vue-router 路由實現
路由就是用來跟后端服務器進行交互的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能
參考 這里
9. v-if 和 v-show 區別
使用了v-if的時候，如果值為false，那么頁面將不會有這個html標簽生成。
v-show則是不管值為true還是false，html元素都會存在，只是CSS中的display顯示或隱藏
10. $route和$router的區別
$router為VueRouter實例，想要導航到不同URL，則使用$router.push方法
$route為當前router跳轉對象里面可以獲取name、path、query、params等
11. NextTick 是做什么的
$nextTick是在下次DOM更新循環結束之后執行延遲回調，在修改數據之后使用$nextTick，則可以在回調中獲取更新后的DOM
具體可參考官方文檔 深入響應式原理
12. Vue 組件 data 為什么必須是函數
因為js本身的特性帶來的，如果data是一個對象，那么由於對象本身屬於引用類型，當我們修改其中的一個屬性時，會影響到所有Vue實例的數據。如果將data作為一個函數返回一個對象，那么每一個實例的data屬性都是獨立的，不會相互影響了
13. 計算屬性computed 和事件 methods 有什么區別
我們可以將同一函數定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的
不同點：
computed: 計算屬性是基於它們的依賴進行緩存的,只有在它的相關依賴發生改變時才會重新求值對於
method，只要發生重新渲染，method調用總會執行該函數
14. 對比 jQuery ，Vue 有什么不同
jQuery 專注視圖層，通過操作 DOM 去實現頁面的一些邏輯渲染； Vue 專注於數據層，通過數據的雙向綁定，最終表現在 DOM 層面，減少了 DOM 操作Vue 使用了組件化思想，使得項目子集職責清晰，提高了開發效率，方便重復利用，便於協同開發
15. Vue 中怎么自定義指令
全局注冊
// 注冊一個全局自定義指令 `v-focus` Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } })局部注冊
directives: {
focus: { // 指令的定義 inserted: function (el) { el.focus() } } }參考 官方文檔-自定義指令
16. Vue 中怎么自定義過濾器
可以用全局方法Vue.filter()注冊一個自定義過濾器，它接收兩個參數：過濾器ID和過濾器函數。過濾器函數以值為參數，返回轉換后的值
Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })<!-- 'abc' => 'cba' --> <span v-text="message | reverse"></span>過濾器也同樣接受全局注冊和局部注冊
17. 對 keep-alive 的了解
keep-alive是Vue內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染
<keep-alive> <component> <!-- 該組件將被緩存！ --> </component> </keep-alive>可以使用API提供的props，實現組件的動態緩存
具體參考 官方API
18. Vue 中 key 的作用
key的特殊屬性主要用在Vue的虛擬DOM算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的算法。使用key，它會基於key的變化重新排列元素順序，並且會移除key不存在的元素。有相同父元素的子元素必須有獨特的
key。重復的key會造成渲染錯誤
具體參考 官方API
19. Vue 的核心是什么
數據驅動 組件系統
20. vue 等單頁面應用的優缺點
優點：
- 良好的交互體驗
- 良好的前后端工作分離模式
- 減輕服務器壓力
缺點：
- SEO難度較高
- 前進、后退管理
- 初次加載耗時多