VUE面試題

1. 說一下 Vue 的雙向綁定數據的原理

vue 實現數據雙向綁定主要是：採用數據劫持結合「發佈者 - 訂閱者」模式的方式，經過 Object.defineProperty() 來劫持各個屬性的 setter、 getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。

2. 解釋單向數據流和雙向數據綁定

單向數據流： 顧名思義，數據流是單向的。數據流動方向能夠跟蹤，流動單一，追查問題的時候能夠更快捷。缺點就是寫起來不太方便。要使 UI 發生變動就必須建立各類 action 來維護對應的 state。

雙向數據綁定：數據之間是相通的，將數據變動的操做隱藏在框架內部。優勢是在表單交互較多的場景下，會簡化大量與業務無關的代碼。缺點就是沒法追蹤局部狀態的變化，增長了出錯時 debug 的難度。

3. Vue 如何去除 URL 中的

vue-router 默認使用 hash 模式，因此在路由加載的時候，項目中的 URL 會自帶 「#」。若是不想使用 「#」， 可使用 vue-router 的另外一種模式 history：

1. new Router({
   
   mode: 'history', routes: [ ] })

須要注意的是，當咱們啓用 history 模式的時候，因爲咱們的項目是一個單頁面應用，因此在路由跳轉的時候，就會出現訪問不到靜態資源而出現 「404」 的狀況，這時候就須要服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 「index.html」 頁面。

4. 對 MVC、MVVM 的理解

 

MVC

特色：

1. View 傳送指令到 Controller；

2. Controller 完成業務邏輯後，要求 Model 改變狀態；

3. Model 將新的數據發送到 View，用戶獲得反饋。

全部通訊都是單向的。

MVVM

 

特色：

1. 各部分之間的通訊，都是雙向的；

2. 採用雙向綁定： View 的變更，自動反映在 ViewModel，反之亦然。

5. Vue 生命週期的理解

Vue 實例有一個完整的生命週期，生命週期也就是指一個實例從開始建立到銷燬的這個過程。

• beforeCreated()：在實例建立之間執行，數據未加載狀態。

• created()：在實例建立、數據加載後，能初始化數據，DOM 渲染以前執行。

• beforeMount()：虛擬 DOM 已建立完成，在數據渲染前最後一次更改數據。

• mounted()：頁面、數據渲染完成，真實 DOM 掛載完成。

• beforeUpadate()：從新渲染以前觸發。

• updated()：數據已經更改完成，DOM 也從新 render 完成，更改數據會陷入死循環。

• beforeDestory() 和 destoryed()：前者是銷燬前執行（實例仍然徹底可用），後者則是銷燬後執行。

6. 組件通訊

父組件向子組件通訊

子組件經過 props 屬性，綁定父組件數據，實現雙方通訊。

子組件向父組件通訊

將父組件的事件在子組件中經過 $emit 觸發。

非父子組件、兄弟組件之間的數據傳遞

1. /*新建一個Vue實例做爲中央事件總嫌*/
   
   let event = new Vue();
   
    
   
   /*監聽事件*/
   
   event.$on('eventName', (val) => {
   
   //......do something
   
   });
   
    
   
   /*觸發事件*/
   
   event.$emit('eventName', 'this is a message.')

    

7. vue-router 路由實現

路由就是用來跟後端服務器進行交互的一種方式，經過不一樣的路徑，來請求不一樣的資源，請求不一樣的頁面是路由的其中一種功能。

8. v-if 和 v-show 區別

使用 v-if 的時候，若是值爲 false ，那麼頁面將不會有這個 html 標籤生成。

v-show 則是無論值爲 true 仍是 false ， html 元素都會存在，只是 CSS 中的 display顯示或隱藏。

9. $route 和 $router 的區別

$router 爲 VueRouter 實例，想要導航到不一樣 URL，則使用 $router.push 方法。

$route 爲當前 router 跳轉對象裏面能夠獲取 name 、 path 、 query 、 params 等。

10. NextTick 是作什麼的

$nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM。

具體可參考官方文檔：深刻響應式原理(https://cn.vuejs.org/v2/guide/reactivity.html)。

11. Vue 組件 data 爲何必須是函數

由於 JS 自己的特性帶來的，若是 data 是一個對象，那麼因爲對象自己屬於引用類型，當咱們修改其中的一個屬性時，會影響到全部 Vue 實例的數據。若是將 data 做爲一個函數返回一個對象，那麼每個實例的 data 屬性都是獨立的，不會相互影響了。

12. 計算屬性 computed 和事件 methods 有什麼區別

咱們能夠將同一函數定義爲一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的。

不一樣點：

• computed：計算屬性是基於它們的依賴進行緩存的，只有在它的相關依賴發生改變時纔會從新求值。

• method：只要發生從新渲染， method 調用總會執行該函數。

13. 對比 jQuery ，Vue 有什麼不一樣

jQuery 專一視圖層，經過操做 DOM 去實現頁面的一些邏輯渲染； Vue 專一於數據層，經過數據的雙向綁定，最終表如今 DOM 層面，減小了 DOM 操做。

Vue 使用了組件化思想，使得項目子集職責清晰，提升了開發效率，方便重複利用，便於協同開發。

16. Vue 中怎麼自定義指令

全局註冊

1. // 註冊一個全局自定義指令 `v-focus`
   
   Vue.directive('focus', {
   
   // 當被綁定的元素插入到 DOM 中時……
   
   inserted: function (el) {
   
   // 聚焦元素
   
   el.focus()
   
   }
   
   })

    

局部註冊

1. directives: {
   
   focus: {
   
   // 指令的定義
   
   inserted: function (el) {
   
   el.focus()
   
   }
   
   }
   
   }

    

參考官方文檔：自定義指令(https://cn.vuejs.org/v2/guide/custom-directive.html)。

15. Vue 中怎麼自定義過濾器

能夠用全局方法 Vue.filter() 註冊一個自定義過濾器，它接收兩個參數：過濾器 ID 和過濾器函數。過濾器函數以值爲參數，返回轉換後的值。

1. Vue.filter('reverse', function (value) {
   
   return value.split('').reverse().join('')
   
   })
   
   <!-- 'abc' => 'cba' -->
   
   <span v-text="message | reverse"></span>

    

過濾器也一樣接受全局註冊和局部註冊。

16. 對 keep-alive 的瞭解

keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。

1. <keep-alive>
   
   <component>
   
   <!-- 該組件將被緩存！ -->
   
   </component>
   
   </keep-alive>

可使用 API 提供的 props，實現組件的動態緩存。

具體參考官方API(https://cn.vuejs.org/v2/api/#keep-alive)。

17. Vue 中 key 的做用

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

具體參考官方API(https://cn.vuejs.org/v2/api/#key)。

18. Vue 的核心是什麼

數據驅動、組件系統。

19. Vue 等單頁面應用的優缺點

優勢

• 良好的交互體驗

• 良好的先後端工做分離模式

• 減輕服務器壓力

缺點

• SEO 難度較高

• 前進、後退管理

• 初次加載耗時多