(超詳細版)2019北京面試題————Vue

時間 2019-11-16

標籤詳細北京面試 vue 欄目快樂工作简体版

原文原文鏈接

一、Vue解決了什麼問題

① 虛擬dom：dom操做時很是耗性能的，再也不使用原生的dom操做節點，極大的解放dom操做，但具體操做的仍是dom，不過是換了一種方式。
② 視圖、數據、結構分離：使數據的更改更爲簡單，不須要進行邏輯代碼的修改，只須要操做數據就能完成相關操做。
③ 組件化：把一個單頁應用中的各類模塊拆分到一個一個單獨的組件中，便於開發，以及後期的維護

二、MVVM的理解

MVVM就是Model-View-ViewModel的縮寫，MVVM將視圖和業務邏輯分開。
View：視圖層，Model數據模型，而ViewModel是把二者創建通訊的橋樑。
在MVVM框架下，View和Model之間沒有直接的聯繫，而是經過ViewModel進行交互。View和ViewModel之間以及Model和ViewModel之間的交互都是雙向的，所以view數據的變化會同步到Model中，而Model數據的變化也會當即反映到View上。能夠說它們二者是實時更新的，互相影響。 ViewModel經過雙向數據綁定把View層和Model層鏈接了起來，而View和Model之間的同步工做徹底是自動的，所以開發者只須要關注業務邏輯，不須要手動操做DOM，也不須要關注數據狀態的同步問題，這些都由MVVM統一管理。

三、如何實現一個自定義組件，不一樣組件之間是如何通訊的

請永遠牢記vue是單向數據流javascript

自定義組件：css

建立子組件的文件，創建組件的模板，把架子搭起來，也就是在子組件中寫好<template>視圖層，<script>邏輯層<style>css樣式層。而後定義好props裏面的數據，實現子組件須要的邏輯代碼後，也就封裝好了，而後直接調用便可。調用的花import引入，同時在父組件<script>（邏輯層）中的components這個對象中寫入組件名稱，最後掛載到父組件的template中便可。html

組件通訊：前端

①props / $emitvue

父組件經過props的方式向子組件傳遞數據，而經過$emit子組件能夠向父組件通訊。java

②$children / $parentnode

this.$children[0].msg = "hello world" //父組件修改子組件data中的數據
this.$parent.mag //子組件拿到父組件data中的數據

$children的值是數組，$parent的值是個對象複製代碼

注意：$parent，$children它們的目的是做爲訪問數組的應急方法，更推薦用props和events實現父子組件通訊。react

③provide / injectwebpack

這是vue2.2.0新增的api，簡單來講就是父組件中經過provide來提供變量，而後再子組件中經過inject來注入變量。ios

//父組件
export default{
    name:"A",
    provide:{
        for:"demo"
    },
    components:{
        comB
    }
}

//子組件
export default{
    name:"B",
    inject:["for"],
    data(){
        demo:this.for
    }
}複製代碼

④ref / refs

ref：若是在普通的DOM元素上使用，引用指向的就是DOM元素；若是用在子組件上，引用就指向組件實例，可經過實例直接調用組件的方法或訪問數據。

//父組件
<template>
    <component-a ref="comA"></component-a>
</template>
<script>
    export default{
        mounted(){
            const comA = this.$refs.comA;
            console.log(comA.name)//Vue.js
            comA.sayHello() //hello
        }
    }
</script>複製代碼

//子組件
export default{
    data(){
        return {
            name:"Vue.js"
        }
    },
    methods:{
        sayHello(){
            console.log("hello")
        }
    }
}複製代碼

⑤eventBus(Bus總線)：

//首先在src中建立一個Bus文件夾 => index.js
import Vue from "vue";
export default new Vue({
    
})

//子組件1(發送數據的組件)
<button @click="add()">點擊</button>
import Bus from "@/Bus"
add(){
    Bus.$emit("add",this.content);
}

//子組件2(接受數據的組件)
<p>{{tit}}</p>
import Bus from "@/Bus";
created(){
    Bus.$on("add",(data) => {
        this.tit = data;
    })
}複製代碼

⑥Vuex；

⑦LocalStorage；

⑧$attrs / $listeners

將數據掛在到子組件的標籤上去後，在子組件中使用this.$attrs直接獲取到全部掛載的數據，返回的是一個對象。

四、nextTick的理解

使用nextTick的緣由：Vue是異步修改DOM的，而且不鼓勵開發者直接接觸DOM，可是有時候須要必須對數據更改後的DOM元素作相應的處理，可是獲取到的DOM數據並非更改後的數據，這時候就須要this.$nextTick()；

原理：Vue經過異步隊列控制DOM更新和nextTick回調函數前後執行的方式。

使用：

//HTML
<button @click="change()">按鈕</button><h1 ref="gss">{{msg}}</h1>
//JS
export default{
    name:"app",
    data(){
        return {
            msg:"123"
        }
    },
    methods:{
        change(){
            this.msg = "456";
            console.log(this.refs["gss"].innerHTML)//123
            this.$nextTick(function(){
                console.log(this.refs["gss"].innerHTML)//456
            })
        }
    }
    
}

複製代碼

五、Vue的生命週期(11個鉤子函數)

⑴beforeCreate(建立前)：在今生命週期函數執行的時候，data和methods中的數據都尚未初始化。

⑵created(建立後)：在今生命週期函數中，data和methods都已經被初始化好了，若是要調用 methods中的方法，或者操做data中的數據，最先只能在created中操做。

⑶beforeMount(載入前)：在今生命週期函數執行的時候，模板已經在內存中編譯好了，可是還沒有掛載到頁面中去，此時頁面仍是舊的。

⑷mounted(載入後)：此時頁面和內存中都是最新的數據，這個鉤子函數是最先能夠操做dom節點的方法。

⑸beforeUpdate(更新前)：此時頁面中顯示的數據仍是舊的，可是data中的數據是最新的，且頁面並未和最新的數據同步。

⑹Updated(更新後)：此時頁面顯示數據和最新的data數據同步。

⑺beforeDestroy(銷燬前)：當執行該生命週期函數的時候，實例身上全部的data，全部的methods以及過濾器......等都處於可用狀態，並無真正執行銷燬。

⑻destroyed(銷燬後)：此時組件以及被徹底銷燬，實例中的全部的數據、方法、屬性、過濾器......等都已經不可用了。

//下面兩個鉤子函數通常配合<keep-alive></keep-alive>使用

⑼activated(組件激活時)：和上面的beforeDestroy和destroyed用法差很少，可是若是咱們須要一個實例，在銷燬後再次出現的話，用beforeDestroy和destroyed的話，就太浪費性能了。實例被激活時使用，用於重複激活一個實例的時候
⑽deactivated(組件未激活時)：實例沒有被激活時。
⑾errorCaptured(錯誤調用)：當捕獲一個來自後代組件的錯誤時被調用

六、虛擬DOM原理

虛擬DOM，其實就是用對象的方式取代真實的DOM操做，把真實的DOM操做放在內存當中，在內存中的對象裏作模擬操做。當頁面打開時瀏覽器會解析HTML元素，構建一顆DOM樹，將狀態所有保存起來，在內存當中模擬咱們真實的DOM操做，操做完後又會生成一顆dom樹，兩顆DOM樹進行比較，根據diff算法比較兩顆DOM樹不一樣的地方，只渲染一次不一樣的地方。

補充：

diff算法核心：

①如何用vnode生成一個dom的節點

patch方法patch(container, vnode)patch(vnode, newVnode)複製代碼

②vnode和newVnode的對比

③修改改變的dom節點

replacechildrencreateElement複製代碼

七、雙向綁定的原理？數據劫持？

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式。

經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。

當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時。Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者。經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}）。最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；

數據劫持：當咱們訪問或設置對象的屬性的時候，都會觸發相對應的函數，而後在這個函數裏返回或設置屬性的值。咱們能夠在觸發函數的時候動一些手腳作點咱們本身想作的事情，這也就是「劫持」操做。

八、Proxy相比於defineProperty的優點

Vue3.0摒棄了Object.defineProperty，改成基於Proxy的觀察者機制探索。

首先說一下Object.defineProperty的缺點：

v1①Object.defineProperty沒法監控到數組下標的變化，致使直接經過數組的下標給數組設置值，不能實施響應。
②Object.defineProperty只能劫持對象的屬性，所以咱們須要對每一個對象的每一個屬性進行遍歷。Vue2.X裏，是經過遞歸 + 遍歷data對象來實現對數據的監控的，若是屬性值也是對象那麼須要深度遍歷，顯然若是能劫持一個完整的對象纔是更好的選擇。

而要取代它的Proxy有如下兩個優勢：

能夠劫持整個對象，並返回一個新對象。
有多種劫持操做(13種)

補充：

Proxy是ES6新增的一個屬性，翻譯過來的意思就是代理，用在這裏表示由它來「代理」某些操做。Proxy讓咱們可以以簡潔易懂的方式控制外部對象的訪問，其功能很是相似於設計模式中的代理模式。
Proxy能夠理解爲，在目標對象以前設一層「攔截」，外界對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。
使用Proxy的核心優勢是能夠交由它來處理一些非核心邏輯(如：讀取或設置對象的某些屬性前記錄日誌；設置對象的某些屬性值前，須要驗證；某些屬性的訪問控制等)。從而可讓對象只須要關注核心邏輯，達到關注點分離，下降對象複雜度等目的。

九、watch、computed和methods的區別

methods在從新渲染的時候每次都會被從新的調用；
computed 是自動監聽依賴值的變化，從而動態返回內容，主要目的是簡化模板內的複雜運算。因此區別來源於用法，只是須要動態值，那就用 computed ；須要知道值的改變後執行業務邏輯，才用 watch。
watch也能夠影響數據的變化，當綁定的數據方法變化時觸發響應的函數，須要在數據變化時執行異步或開銷較大的操做時使用watch。

十、virtual-dom原理實現(虛擬dom)

virtual-dom(簡稱vdom)的概念大規模的推廣仍是得益於react的出現，virtual-dom也是react這個框架的很是重要的特性之一。相比於頻繁的手動去操做dom而帶來性能問題，vdom很好的將dom作了一層映射關係，進而將在咱們本須要直接進行dom的一系列操做，映射到了操做vdom，而vdom上定義了關於真實dom進行的建立節點，刪除節點，添加節點等一系列複雜的dom操做，並將這些操做放到vdom中進行，這樣就經過操做vdom來提升直接操做的dom的效率和性能。

在vue的整個應用生命週期當中，每次須要更新視圖的時候便會使用vdom，vdom算法是基於snabbdom算法所作的修改。

實現：

①用js對象構造一個虛擬的dom樹，插入到文檔中；
②狀態變動時，記錄新樹和舊樹的差別；
③把上面的差別構建到真正的dom中。

十二、vue-router

❄ 單頁面路由跳轉的方式：

①hash(哈希默認)模式：使用 URL hash 值來做路由。默認模式。
②history(mode:history)模式：依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
③abstract模式(嚴格模式)：支持全部 JavaScript 運行環境，如 Node.js 服務器端。
根據mode參數來決定採用哪種方式。

vue-router的實現原理(核心)：更新視圖但不從新請求頁面。

❄ vue-router登錄權限的判斷

vue-router的登錄權限判斷主要是在全局鉤子函數中進行的，咱們在router.js文件中的定義路由裏，將須要登錄權限的頁面加上meta屬性，值是對象的形式，而後在該對象中自定義一個屬性，屬性值就是一個Boolean值，這時候在main.js文件的全局鉤子函數中進行判斷，若是須要跳轉的頁面的自定義屬性值爲true，那麼將進行判斷其是否登陸，若是沒有登陸，則告訴用戶登陸，若是有登陸，那麼進行頁面跳轉。

routes:[
    {
        path:"/home",
        name:"Home",
        components:Home
        meta:{requireAuth:true}
    }
]複製代碼

router.beforeEach((to,from,next) => {
    if(to.meta.requireAuth){//判斷該路由是否須要登陸權限
        if(store.state.token){//經過vuex的state獲取當前的token是否存在
            next()
        }else{
            next({
                path:"/one",
                query:{redirect:to.fullPath}//將跳轉的路由path做爲參數，登錄成功後跳轉到該路由
            })
        }
    }else{
        next();
    }    
})複製代碼

❄ 路由嵌套

routes:[
    {
        path:"/home",
        name:"Home",
        components:Home,
       children:[
            {
                path:"child",
                name:"Child",
                components:"Child"
            }
        ]
    }
]複製代碼

1三、Vuex的理解

定義：Vuex是一個專爲Vue.js應用程序開發的狀態管理模式。它採用集中式儲存管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

使用場景：須要構建一箇中大型單頁應用，您極可能會考慮如何更好的在組件外部管理狀態，Vuex將會成爲天然而然的選擇。

優勢：當你在state中定義了一個數據以後，能夠在所在項目中的任何一個組件裏進行獲取、進行修改、而且你的修改能夠獲得全局的響應變動。

Vuex的運行機制：Vuex提供數據（state）來驅動試圖（vue components），經過dispath派發actions，在其中能夠作一些異步的操做，而後經過commit來提交mutations，最後mutations來更改state。

核心：

①state：定義初始數據。
②mutations：更改Vuex的store中的狀態的惟一方法是提交mutation
③getters：能夠對 state 進行計算操做，它就是 store 的計算屬性雖然在組件內也能夠作計算屬性，可是 getters 能夠在多給件之間複用若是一個狀態只在一個組件內使用，是能夠不用 getters。
④actions：異步操做初始數據，其實就是調用mutations裏面的方法。
⑤module：面對複雜的應用程序，當管理的狀態比較多時；咱們須要將vuex的store對象分割成模塊(modules)。

Vuex的映射：

state（數據）、getters（計算屬性）須要映射在computed實例中，而mutations（同步操做放），actions（異步操做方法）等須要放在methods實例中

computed:{
    ...mapState([
        "list",
    ])
}
methods:{
    ...mapMutations([
        "changes",
    ])
}複製代碼

1四、描述下vue從初始化頁面-->修改數據-->刷新頁面UI過程？

當Vue進入初始化階段時，一方面 Vue會遍歷data中的屬性，並用Object.defineProperty將它轉化成getter/setterd的形式，實現數據劫持；另外一方面， Vue的指令編譯器Compiler對元素節點的各個指令進行解析，初始化視圖，並訂閱Watcher來更新視圖，此時Watcher會將本身 添加到消息訂閱器Dep中，此時初始化完畢。
當數據發生變化時，觸發Observer中setter方法， 當即調用Dep.notify( )，Dep這個數組開始遍歷全部的訂閱者，並 調用其update方法，Vue內部再經過diff算法，patch相應的更新完成對訂閱者視圖的改變。

1五、Vue的響應式原理

當一個Vue實例建立時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉爲 getter/setter而且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每一個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

1六、Vue.js的特色

簡潔：頁面由HTML模板+Json數據+Vue實例組成
數據驅動：自動計算屬性和追蹤依賴的模板表達式
組件化：用可複用、解耦的組件來構造頁面
輕量：代碼量小，不依賴其餘庫
快速：精確有效批量DOM更新
模板友好：可經過npm，bower等多種方式安裝，很容易融入

1七、插槽的理解

插槽用於決定將所攜帶的內容，插入到子組件指定的某個位置，但內容必須在父組件中子組件的標籤內定義，在子組件中用<slot></slot>標籤接收。slot是組件內部的佔位符。

1八、vue-router有哪幾種導航鉤子

① 全局導航鉤子：通常用來判斷權限，以及頁面丟失時須要執行的操做；

beforeEach（）每次路由進入以前執行的函數。

afterEach（）每次路由進入以後執行的函數。

beforeResolve（）2.5新增

② 單個路由（實例鉤子）：某個指定路由跳轉時須要執行的邏輯。

beforeEnter（）

beforeLeave（）

③ 組件路由鉤子：

beforeRouteEnter（）

beforeRouteLeave（）

beforeRouteUpdate（）

1九、vue組件中的data爲何是一個函數

data是一個函數時，每一個組件實例都有本身的做用域，每一個實例相互獨立，不會相互影響。Object是引用數據類型，若是不用function返回，每一個組件的data都是內存的同一個地址，一個數據改變了其餘也改變了。

20、路由懶加載

使用緣由：在單頁應用中，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，延時過長，不利於用戶體驗，而運用懶加載則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時

原理：vue異步組件技術：異步加載，vue-router配置路由 , 使用vue的異步組件技術 , 實現按需加載。

① 第一種：

component:(resolve) => {
    require(["@/components/HelloWorld"],resolve);
}複製代碼

② 第二種：

const info = () => import("@/components/info");複製代碼

③ 第三種：

const info = (resolve) => {
    import("@/components/info").then(modul => {
        resolve(modul);
    })
}複製代碼

④ 第四種：

const info = r => require.ensure([],() => r(
    require("@/components/info")
),"info");複製代碼

2一、Vue.js介紹

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API；Vue.js是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。數據驅動+組件化的前端開發。經過儘量簡單的 API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

2二、scoped原理及穿透方法

vue中的scoped經過在DOM結構以及css樣式上加惟一不重複的標記：data-v-hash的方式，以保證惟一(經過PostCSS轉譯)，達到樣式私有模塊化的目的。

scoped的3條渲染規則：

① 給HTML的DOM節點加一個不重複的data屬性，來表示它的惟一性；

② 在每句css選擇器末尾（編譯後的生成的css語句）加一個當前組件的data屬性選擇器來私有化樣式；

③ 若是組件內部包含有其餘組件，只會給其餘組件的最外層標籤加上ddan當前組件的data屬性。

補充：

在作項目中，會遇到這麼一個問題，即：引用了第三方組件，須要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性形成組件之間的樣式污染。那麼有哪些解決辦法呢？

①不使用scopeds省略（不推薦）；

② 在模板中使用兩次style標籤。

③scoped穿透：/deep/ >>>

PostCSS：使用JS插件轉換CSS的工具。這些插件能夠支持變量和mixins，轉換未來的css語法，內聯圖像等。Autoprefixer是一種很是流行的PostCSS插件。

2三、請說出vue.cli項目中src目錄每一個文件夾和文件的用法

assets文件夾是放靜態資源；
components是放組件；
router是定義路由相關的配置;
view視圖；
app.vue是一個應用主組件；
main.js是入口文件

2四、Vue中key值的做用

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key 的做用主要是爲了高效的更新虛擬DOM。

2五、Vue怎麼重置data

使用Object.assign()，vm.$data能夠獲取當前狀態下的data，vm.$options.data能夠獲取到組件初始化狀態下的data。

Object.assign(this.$data, this.$options.data())複製代碼

2六、組件中寫name選項有什麼做用

①項目使用keep-alive時，可搭配組件的name進行緩存過濾。
②DOM作遞歸組件時須要調用自身name
③vue-devtools調試工具裏顯示的組件名稱是由vue中組件name決定的

2七、route和router

route是「路由信息對象」，包括path,params,hash,query,fullPath,matched,name等路由信息參數。

router是「路由實例對象」，包括了路由的跳轉方法(push、go)，鉤子函數等。

2八、Vue和React的區別

監聽數據變化的實現原理不一樣：Vue 經過 getter/setter 以及一些函數的劫持，能精確快速的計算出 vdom 的差別。這是因爲它在渲染過程當中，會跟蹤每個組件的依賴關係，不須要從新渲染整個組件樹。React 默認是經過比較引用的方式進行的，若是不優化，每當應用的狀態被改變時，所有子組件都會從新渲染，可能致使大量沒必要要的 VDOM 的從新渲染。
數據流的不一樣：Vue 中默認支持雙向綁定，組件與 DOM 之間能夠經過 v-model 雙向綁定。可是，父子組件之間，props 在 2.x 版本是單向數據流。React 一直提倡的是單向數據流。
模板渲染方式的不一樣：React 是經過 JSX 渲染模板，而 Vue 是經過一種拓展的 HTML 語法進行渲染

2九、首屏加載優化

①把不常改變的庫放到index.html中，經過cdn引入

而後找到 build/webpack.base.conf.js 文件，在 module.exports = { } 中添加如下代碼：

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
},複製代碼

②vue路由懶加載

③不生成map文件，找到config/index.js文件，修改成productionSourcceMap：false

④vue組件儘可能不要全局引入

⑤使用更輕量級的工具庫

⑥開啓gzip壓縮：這個優化是兩方面的，前端將文件打包成.gz文件，而後經過nginx的配置，讓瀏覽器直接解析.gz文件。

⑦首頁單獨作服務端渲染：若是首頁真的有瓶頸，能夠考慮用 node 單獨作服務端渲染，而下面的子頁面仍用 spa 單頁的方式交互。這裏不推薦直接用 nuxt.js 服務端渲染方案，由於這樣一來增長了學習成本，二來服務端的維護成本也會上升，有時在本機測試沒問題，在服務端跑就有問題，爲了省心，仍是最大限度的使用靜態頁面較好。

2九、Vue3.0的瞭解

大體有三個點，第一個是關於提出的新API setup()函數，第二個說了對於Typescript的支持，最後說了關於替換Object.defineProperty爲 Proxy 的支持。詳細說了下關於Proxy代替帶來的性能上的提高，由於傳統的原型鏈攔截的方法，沒法檢測對象及數組的一些更新操做，但使用Proxy又帶來了瀏覽器兼容問題。

30、vue-cli替咱們作了哪些工做

vue-cli是基於 Vue.js 進行快速開發的完整系統，也能夠理解成是不少 npm 包的集合。

vue-cli完成的功能：

.vue 文件 --> .js 文件
ES6 語法 --> ES5 語法
Sass,Less,Stylus --> CSS
對 jpg,png,font 等靜態資源的處理
熱更新
定義環境變量，區分 dev 和 production 模式

若是開發者須要補充或修改默認設置，須要在 package.json 同級下新建一個 vue.config.js 文件

3一、vue的指令

⑴v-bind：給元素綁定屬性

⑵v-on：給元素綁定事件

⑶v-html：給元素綁定數據，且該指令能夠解析html標籤

⑷v-text：給元素綁定數據，不解析標籤

⑸v-model：數據雙向綁定

⑹v-for：遍歷數組

⑺v-if：條件渲染指令，動態在DOM內添加或刪除DOM元素

⑻v-else：條件渲染指令，必須跟v-if成對使用

⑼v-else-if：判斷多層條件，必須跟v-if成對使用

⑽v-cloak：解決插值閃爍問題

⑾v-once：只渲染元素或組件一次

⑿v-pre：跳過這個元素以及子元素的編譯過程，以此來加快整個項目的編譯速度

⒀v-show：條件渲染指令，將不符合條件的數據隱藏(display:none)

3二、v-for 與 v-if 的優先級

v-for比v-if優先，若是每一次都須要遍歷整個數組，將會影響速度，尤爲是當之須要渲染很小一部分的時候。

3三、axios的攔截

//響應攔截
axios.interceptors.response.use(function(response){
    //對響應數據作點什麼
    return response.data
},function(error){
    //對錯誤響應作點什麼
    return Promise.reject(error)
})複製代碼

//請求攔截
axios.interceptors.request.use(function(config){
    //在發送請求以前作些什麼
    return config
},function(error){
    //對請求錯誤作些什麼
    return Promise.reject(error)
})複製代碼