之前有提到，在經(jīng)歷了前端轉(zhuǎn)型之后枷颊，一場技術(shù)變革的到來戳杀，小程序，h5移動(dòng)端偷卧，對(duì)性能優(yōu)化的要求越來越高，受面向?qū)ο笏枷刖幊谭绞降挠绊戇壕耄岸爽F(xiàn)在主流的技術(shù)框架就是Vue,React,Angular.他們的數(shù)據(jù)驅(qū)動(dòng)模式听诸，MVVM模式，很受歡迎蚕泽，這種spa單頁面應(yīng)用晌梨，組件思維對(duì)一個(gè)龐大的web應(yīng)用很有幫助提升加載速度，減少Dom操作须妻，隨之而來的也就是不斷地學(xué)習(xí)仔蝌，對(duì)技術(shù)員的技術(shù)要求也開始偏向于vue,小程序，公眾號(hào)荒吏，由于智能手機(jī)的普及敛惊，app端比網(wǎng)頁更受歡迎，所以就要不斷地學(xué)習(xí)新的知識(shí)绰更，否則會(huì)被淘汰瞧挤。

好了，不說廢話了儡湾，總結(jié)一下使用vue開發(fā)項(xiàng)目過程中遇到的坑以及面試經(jīng)驗(yàn)特恬。

step一，談?wù)勀銓?duì)MVVM 的理解徐钠？

• MVVM 由 Model,View,ViewModel 三部分構(gòu)成癌刽，Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯尝丐；View 代表UI 組件显拜，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來，ViewModel 是一個(gè)同步View 和 Model的對(duì)象爹袁。
  在MVVM架構(gòu)下讼油，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互呢簸，Model 和 ViewModel 之間的交互是雙向的矮台， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中乏屯，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
  ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來瘦赫，而View 和 Model 之間的同步工作完全是自動(dòng)的辰晕，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯确虱，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題含友，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理。

step二校辩，vue路由傳參的方式

[圖片上傳失敗...(image-f2dfe1-1554273574051)]

• router.js 后邊跟:id配置參數(shù)
• query 方法傳參
• name 方法傳參
• vue自帶標(biāo)簽<router-link :to>標(biāo)簽傳參
• 詳情請(qǐng)看Vue $router 路由傳參的4種方法詳解

step三窘问，vue組件之間的傳參

[圖片上傳失敗...(image-901dae-1554273574051)]

• 父傳子 props
• 子傳父 this.$emit
• 非父子組件 eventHub 中轉(zhuǎn)站 this.$on
• vuex state 存的變量，mutations改變的狀態(tài) actions 觸發(fā)的行為（方法）
  組件傳參具體的傳參請(qǐng)參考vue2.0父子組件以及非父子組件通信傳參詳解
  vuex stroe 具體的請(qǐng)參考vuex原理宜咒，用法踩坑小計(jì)

step四惠赫，vue-router有哪幾種導(dǎo)航鉤子？

答案

• 第一種是全局導(dǎo)航鉤子（全局守衛(wèi)）：router.beforeEach(to,from,next)故黑，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截儿咱。
• 第 二種：全局解析守衛(wèi)router.beforeResolve,在導(dǎo)航被確認(rèn)前，所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后场晶，解析守衛(wèi)就被調(diào)用混埠。（2.5.0新增）。
• 第三種：單獨(dú)路由獨(dú)享的守衛(wèi)beforeEnter,在路由配置時(shí)定義诗轻，與全局守衛(wèi)的方法是一樣的钳宪。
• 第四種：組件內(nèi)的守衛(wèi)。直接在路由組件內(nèi)定義守衛(wèi)扳炬，
  以下為官網(wǎng)文檔的介紹：

  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不使套！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前鞠柄，組件實(shí)例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變侦高，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id厌杜，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候奉呛，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用夯尽。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用瞧壮。
    // 可以訪問組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問組件實(shí)例 `this`
  }

step五，請(qǐng)寫出幾種常用的vue指令

v-class匙握、v-for咆槽、v-if、v-show圈纺、v-on,v-model

step六秦忿，請(qǐng)?jiān)敿?xì)解釋一下vue(2.0)的生命周期麦射？

答案：

step七穆碎，slot是什么牙勘？并說一下詳細(xì)的用法？

答案：
vue官網(wǎng)解釋：slot 插槽惨远，-------（Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API谜悟，這套 API 基于當(dāng)前的 Web Components 規(guī)范草案话肖，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口北秽。
）是不是看完稀里糊涂的，反正我是稀里糊涂的最筒，再來說說我自己的理解:
slot就是為了實(shí)現(xiàn)真正的靈活的單頁組件贺氓，在組件外部靈活控制組件內(nèi)部的內(nèi)容一種形式或者是入口，就是將組件內(nèi)所需要的內(nèi)容以插槽（slot）的形式插入到公共組件中床蜘，以達(dá)到靈活控制辙培。
當(dāng)組件渲染的時(shí)候，這個(gè) <slot> 元素將會(huì)被替換為“Your Profile”邢锯。插槽內(nèi)可以包含任何模板代碼扬蕊，包括 HTML：詳情請(qǐng)看vue 帶動(dòng)畫效果的NavBar這里邊有詳細(xì)介紹到<slot>的使用方法。

step八丹擎，談?wù)勀銓?duì)vue響應(yīng)式原理的理解?

答案：
先看看官網(wǎng)的解釋：
當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)尾抑，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter蒂培。Object.defineProperty 是 ES5 中一個(gè)無法 shim 的特性再愈，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

這些 getter/setter 對(duì)用戶來說是不可見的护戳，但是在內(nèi)部它們讓 Vue 追蹤依賴翎冲，在屬性被訪問和修改時(shí)通知變化。這里需要注意的問題是瀏覽器控制臺(tái)在打印數(shù)據(jù)對(duì)象時(shí) getter/setter 的格式化并不同媳荒，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口抗悍。

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象驹饺，它會(huì)在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)檐春，會(huì)通知 watcher 重新計(jì)算逻淌，從而致使它關(guān)聯(lián)的組件得以更新。

step九疟暖，直接對(duì)對(duì)象屬性進(jìn)行添加和刪除會(huì)不會(huì)直接響應(yīng)到視圖中卡儒？也就是說數(shù)組的更新方法？并說明原因俐巴？

答案：
直接對(duì)對(duì)象屬性進(jìn)行添加和刪除是不會(huì)響應(yīng)到視圖中的骨望，需要用到this.$set()方法
舉個(gè)例子

var vm = new Vue({
  data:{
      myjson:{
    name:"張三"     
}
  }
})
vm.myjson.age= "12";    //這樣直接對(duì)對(duì)象屬性進(jìn)行增加是不會(huì)直接響應(yīng)到視圖中的。
需要這么寫：
this.$set(this.myjson,'age',12);//才會(huì)生效

原因
受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)欣舵，Vue 不能檢測到對(duì)象屬性的添加或刪除擎鸠。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它缘圈，這樣才能讓它是響應(yīng)的劣光。

step十，如何創(chuàng)建一個(gè)公共的全局組件糟把，并在每個(gè)頁面中調(diào)用以及如何創(chuàng)建并調(diào)用公共的方法绢涡？

答案:
[圖片上傳失敗...(image-a84d49-1554273574050)]

將創(chuàng)建好的組件或者js方法導(dǎo)出并掛載到vue實(shí)例上。
詳情請(qǐng)參考關(guān)于vue全局引用公共的js和公共的組件的折騰

step十一遣疯，請(qǐng)說明v-if和v-show的異同雄可？

同：兩者都是達(dá)到顯示隱藏的功能
異：

• v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果
• v-show指令通過修改元素的display屬性讓其顯示或者隱藏

step十二，<keep-alive></keep-alive>的作用是什么?

答案：
<keep-alive></keep-alive> 包裹動(dòng)態(tài)組件時(shí)缠犀，會(huì)緩存不活動(dòng)的組件實(shí)例,主要用于保留組件狀態(tài)或避免重新渲染数苫。
用自己的理解說
比如有一個(gè)列表和一個(gè)詳情，那么用戶就會(huì)經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁面辨液，那么就可以對(duì)列表組件使用<keep-alive></keep-alive>進(jìn)行緩存虐急，這樣用戶每次返回列表的時(shí)候，都能從緩存中快速渲染滔迈，而不是重新渲染止吁，這樣就會(huì)減輕服務(wù)器壓力，提高性能亡鼠。

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

答案：

• :to 相當(dāng)于a標(biāo)簽中的"herf"屬性间涵，后面跟跳轉(zhuǎn)鏈接所用 仁热，會(huì)渲染成a標(biāo)簽--<a href="url">

<router-link :to="/home">Home</router-link>
<!-- 渲染結(jié)果 -->
<a href="/home">Home</a>

• replace屬性，加上該屬性頁面切換不會(huì)留下歷史紀(jì)錄。

<router-link :to="/home" replace></router-link>

• tag屬性抗蠢，具有tag屬性的router-link會(huì)被渲染成相應(yīng)的標(biāo)簽

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染結(jié)果 -->
<li>Home</li>
此時(shí)頁面的li同樣會(huì)起到a鏈接跳轉(zhuǎn)的結(jié)果举哟，vue會(huì)自動(dòng)為其綁定點(diǎn)擊事件，并跳轉(zhuǎn)頁面

• active-class屬性：設(shè)置鏈接激活時(shí)的class屬性：默認(rèn)值為router-link-active,所以如果沒有設(shè)置迅矛，就會(huì)被渲染為這個(gè)class妨猩，我們可以在router.js里邊配置這個(gè)屬性

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

• exact屬性：嚴(yán)格模式

// 這個(gè)鏈接只會(huì)在地址為 / 的時(shí)候被激活 
<router-link to="/" exact>Home</router-link>

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

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

// 如果不設(shè)置exact，則當(dāng)路由到了/user/userinfo 頁面時(shí)秽褒，USER也是被設(shè)置了router-link-active樣式的壶硅！

• 方法：

 router-link默認(rèn)是觸發(fā)router.push(location)，如果設(shè)置的replace 則觸發(fā)router.replace(location)销斟，這有啥區(qū)別呢?
　　router.push() ：導(dǎo)航跑到不同的URL,這個(gè)方法會(huì)向history棧添加一個(gè)新的記錄庐椒，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)蚂踊，則回到之前的url.
　　router.replace(): 跟router.push作用是一樣的约谈，但是，它不會(huì)向history添加新記錄犁钟，而是跟它的方法名一樣替換掉當(dāng)前的history記錄.
　　router.go(n): 這個(gè)方法的參數(shù)是一個(gè)整數(shù)棱诱，意思是在history記錄中向前或者后退多少步，類似window.history.go(n)

step十四涝动，v-once的作用和用法迈勋？

只渲染元素和組件一次，隨后的渲染捧存，使用了此指令的元素/組件及其所有的子節(jié)點(diǎn)粪躬，都會(huì)當(dāng)作靜態(tài)內(nèi)容并跳過担败，這可以用于優(yōu)化更新性能昔穴。
舉個(gè)例子：一看便知

<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 = "我就要改變你";
       此時(shí)這個(gè)操作dom里邊的count是不會(huì)變化的
      }
    }
  }
</script>
<style scoped>
</style>

step十五，如何解決在加載頁面時(shí)出現(xiàn)的閃爍問題提前。

v-cloak詳情請(qǐng)移步v-cloak詳解

step十六吗货，vue如何兼容ie的問題。

答案：
回答關(guān)鍵字 - babel-polyfill插件
詳情請(qǐng)移步vue-cli 解決ie兼容性問題

step十七狈网，vue-cli如何解決跨域宙搬？

答案：常見的后臺(tái)加請(qǐng)求頭以及jsonp就不詳細(xì)解釋了，若要看詳細(xì)教程請(qǐng)移步前端面試題總結(jié)拓哺。
這里主要介紹的是 npm模塊之http-proxy-middleware的解決跨域的辦法勇垛。詳情移步vue-cli如何解決跨域

作者：愿醒靜臥忘塵谷
鏈接：http://www.reibang.com/p/42a4be57287f
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處士鸥。