Vue面試題以及實際項目中遇到的坑

時間 2019-12-08

原文原文鏈接

寫在前面

以前有提到，在經歷了前端轉型以後，一場技術變革的到來，小程序，h5移動端，對性能優化的要求愈來愈高，受面向對象思想編程方式的影響，前端如今主流的技術框架就是Vue,React,Angular.他們的數據驅動模式，MVVM模式，很受歡迎，這種spa單頁面應用，組件思惟對一個龐大的web應用頗有幫助提高加載速度，減小Dom操做，隨之而來的也就是不斷地學習，對技術員的技術要求也開始偏向於vue,小程序，公衆號，因爲智能手機的普及，app端比網頁更受歡迎，因此就要不斷地學習新的知識，不然會被淘汰。前端

好了，不說廢話了，總結一下使用vue開發項目過程當中遇到的坑以及面試經驗。vue

這裏關於v-model原理的僅限於vue3.0如下版本，據說vue3.0不在採用Object.defineProperty,具體的還有待學習，完了瞭解了再來更新。git

step一，談談你對MVVM 的理解？

MVVM 由 Model,View,ViewModel 三部分構成，Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯；View 表明UI 組件，它負責將數據模型轉化成UI 展示出來，ViewModel 是一個同步View 和 Model的對象。在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的，所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。 ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

step二，vue路由傳參的方式

$\color{red}{回答關鍵字}$

router.js 後邊跟:id配置參數
query 方法傳參
name 方法傳參
vue自帶標籤標籤傳參
詳情請看Vue $router 路由傳參的4種方法詳解

step三，vue組件之間的傳參

$\color{red}{回答關鍵字}$

父傳子 props
子傳父 this.$emit
非父子組件 eventHub 中轉站 this.$on
vuex state 存的變量，mutations改變的狀態 actions 觸發的行爲（方法）組件傳參具體的傳參請參考vue2.0父子組件以及非父子組件通訊傳參詳解 vuex stroe 具體的請參考vuex原理，用法踩坑小計

step四，vue-router有哪幾種導航鉤子？

答案github

第一種是全局導航鉤子（全局守衛）：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。
第二種：全局解析守衛router.beforeResolve,在導航被確認前，全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用。（2.5.0新增）。
第三種：單獨路由獨享的守衛beforeEnter,在路由配置時定義，與全局守衛的方法是同樣的。
第四種：組件內的守衛。直接在路由組件內定義守衛，如下爲官網文檔的介紹：

beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 由於當守衛執行前，組件實例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
複製代碼

step五，請寫出幾種經常使用的vue指令

v-once、v-for、v-if、v-show、v-on,v-model
複製代碼

step六，請詳細解釋一下vue(2.0)的生命週期？

答案：web

生命週期	階段	描述
beforeCreated	建立前	vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。
created	建立後	vue實例的數據對象data有了，$el尚未。
beforeMount	模板載入前	vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換
mounted	模板載入後	vue實例掛載完成，data.message成功渲染。
beforeUpdate	組件更新前	組件更新以前調用
updated	組件更新後	組件更新以後調用
beforeDestroy	組件銷燬前	調用$destroy方法後，當即執行beforeDestroy
pdestroyed	組件銷燬後	組件銷燬後調用，此時只剩下dom空殼

step七，slot是什麼？並說一下詳細的用法？

答案： vue官網解釋：slot 插槽，-------（Vue 實現了一套內容分發的 API，這套 API 基於當前的 Web Components 規範草案，將 <slot> 元素做爲承載分發內容的出口。）是否是看完稀裏糊塗的，反正我是稀裏糊塗的，再來講說我本身的理解: slot就是爲了實現真正的靈活的單頁組件，在組件外部靈活控制組件內部的內容一種形式或者是入口，就是將組件內所須要的內容以插槽（slot）的形式插入到公共組件中，以達到靈活控制。當組件渲染的時候，這個元素將會被替換爲「Your Profile」。插槽內能夠包含任何模板代碼，包括 HTML：詳情請看vue 帶動畫效果的NavBar這裏邊有詳細介紹到<slot>的使用方法。面試

step八，談談你對vue響應式原理的理解?

答案：先看看官網的解釋：當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。Object.defineProperty 是 ES5 中一個沒法 shim 的特性，這也就是爲何 Vue 不支持 IE8 以及更低版本瀏覽器的緣由。vue-router

這些 getter/setter 對用戶來講是不可見的，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裏須要注意的問題是瀏覽器控制檯在打印數據對象時 getter/setter 的格式化並不一樣，因此你可能須要安裝 vue-devtools 來獲取更加友好的檢查接口。vuex

每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。vue-cli

這裏特別說明一下npm

其實看過api,源碼的人就不難知道，v-model,響應式原理共分爲兩層

第一層，底層，就是es5的一個特性Object.defineProperty經過getter,setter更新數據，第二層，表現層，看過v-model原理的人都知道，v-model裏邊有一個watcher,v-onwatcher監聽到數據變化，v-on更新到視圖中，相信好多人在實戰中都用過v-on來更新數據。

step九，直接對對象屬性進行添加和刪除會不會直接響應到視圖中？也就是說數組的更新方法？並說明緣由？

答案：直接對對象屬性進行添加和刪除是不會響應到視圖中的，須要用到this.$set()方法舉個例子

var vm = new Vue({
  data:{
      myjson:{
    name:"張三"     
}
  }
})
vm.myjson.age= "12";    //這樣直接對對象屬性進行增長是不會直接響應到視圖中的。
須要這麼寫：
this.$set(this.myjson,'age',12);//纔會生效
複製代碼

緣由受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

step十，如何建立一個公共的全局組件，並在每一個頁面中調用以及如何建立並調用公共的方法？

答案: $\color{red}{回答關鍵字}$ 將建立好的組件或者js方法導出並掛載到vue實例上。詳情請參考關於vue全局引用公共的js和公共的組件的折騰

step十一，請說明`v-if`和`v-show`的異同？

同：二者都是達到顯示隱藏的功能異：

v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果
v-show指令經過修改元素的display屬性讓其顯示或者隱藏

step十二，`<keep-alive></keep-alive>`的做用是什麼?

答案： <keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。 用本身的理解說 好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就能夠對列表組件使用進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是從新渲染，這樣就會減輕服務器壓力，提升性能。

step十三，`<router-link>`屬性以及方法？

答案：

:to 至關於a標籤中的"herf"屬性，後面跟跳轉連接所用，會渲染成a標籤--

<router-link :to="/home">Home</router-link>
<!-- 渲染結果 -->
<a href="/home">Home</a>
複製代碼

replace屬性，加上該屬性頁面切換不會留下歷史紀錄。

<router-link :to="/home" replace></router-link>
複製代碼

tag屬性，具備tag屬性的router-link會被渲染成相應的標籤

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染結果 -->
<li>Home</li>
此時頁面的li一樣會起到a連接跳轉的結果，vue會自動爲其綁定點擊事件，並跳轉頁面
複製代碼

active-class屬性：設置連接激活時的class屬性：默認值爲router-link-active,因此若是沒有設置，就會被渲染爲這個class，咱們能夠在router.js裏邊配置這個屬性

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 這是連接激活時的class
})
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
複製代碼

exact屬性：嚴格模式

// 這個連接只會在地址爲 / 的時候被激活 
<router-link to="/" exact>Home</router-link>

<router-link to="/user">USER</router-link>

<router-link to="/user/userinfo">USER-info</router-link>

// 若是不設置exact，則當路由到了/user/userinfo 頁面時，USER也是被設置了router-link-active樣式的！
複製代碼

方法：

router-link默認是觸發router.push(location)，若是設置的replace 則觸發router.replace(location)，這有啥區別呢?
&emsp;&emsp;router.push() ：導航跑到不一樣的URL,這個方法會向history棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，則回到以前的url.
&emsp;&emsp;router.replace(): 跟router.push做用是同樣的，可是，它不會向history添加新記錄，而是跟它的方法名同樣替換掉當前的history記錄.
&emsp;&emsp;router.go(n): 這個方法的參數是一個整數，意思是在history記錄中向前或者後退多少步，相似window.history.go(n)
複製代碼

step十四，`v-once`的做用和用法？

只渲染元素和組件一次，隨後的渲染，使用了此指令的元素/組件及其全部的子節點，都會看成靜態內容並跳過，這能夠用於優化更新性能。舉個例子：一看便知

<template>
  <div>
    <div>{{count}}</div>
    <button v-on:click="addCount">改變count的值</button>
  </div>
</template>
<script>
  export default {
    name: "VueOnce",
    data() {
      return {
        count: "我是不可改變的"
      }
    },
    methods: {
      addCount: function () {
        this.count = "我就要改變你";
       此時這個操做dom裏邊的count是不會變化的
      }
    }
  }
</script>
<style scoped>
</style>
複製代碼