1.vue組件中的data定義必須是一個(gè)函數(shù)？

? ? ? ? 如果data是對(duì)象的話，由于對(duì)象是引用類型，組件被復(fù)用的話，就會(huì)創(chuàng)建多個(gè)實(shí)例。本質(zhì)上，這些實(shí)例用的都是同一個(gè)構(gòu)造函數(shù)。這樣就會(huì)影響到所有的實(shí)例，所以為了保證組件不同的實(shí)例之間data不沖突，data必須是一個(gè)函數(shù)。

2.Vuex是什么？怎么使用？那些場景使用過？

vuex 就是一個(gè)倉庫，倉庫里放了很多對(duì)象。

其中 state 存放的是數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)。

getters類似vue的計(jì)算屬性，主要用來過濾一些數(shù)據(jù)。

mutations:存放的是動(dòng)態(tài)修改Vuex的state中保存的數(shù)據(jù)狀態(tài)的方法。

actions:保存的觸發(fā)mutations中方法的方法，可以理解為通過將mutations里面處理數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡單的說就是異步操作數(shù)據(jù)。

一般什么樣的數(shù)據(jù)會(huì)放在 State 中呢？

目前主要有兩種數(shù)據(jù)會(huì)使用 vuex 進(jìn)行管理： 1、組件之間全局共享的數(shù)據(jù) 2、通過后端異步請(qǐng)求的數(shù)據(jù) 比如做加入購物車、登錄狀態(tài)等都可以使用Vuex來管理數(shù)據(jù)狀態(tài)

怎么使用Vuex? 在main.js引入store，注入。新建了一個(gè)目錄store，… export

場景有：單頁應(yīng)用中，組件之間的狀態(tài)、音樂播放、登錄狀態(tài)、加入購物車

3.什么是slot，有哪些類型的slot？

? ? ? ? 它是vue提出的一個(gè)概念，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，使得模塊分塊，具有模塊化特質(zhì)。vue的slot主要分三種，默認(rèn)插槽，具名插槽，作用域插槽；使用插槽是在存在父子關(guān)系的組件中使用，我們可以在子組件中決定插槽的位置，同時(shí)子組件也可以給這些插槽的默認(rèn)信息，當(dāng)父組件中沒有需要給子組件插槽插入信息時(shí)，顯示的是子組件插槽定義的默認(rèn)信息 。

默認(rèn)插槽：<slot></slot>

? ? ? ? 在子組件中定義一個(gè)默認(rèn)插槽

具名插槽：<slot name="名稱"></slot>

? ? ? ? 其實(shí)就是在子組件中定義插槽時(shí)，給對(duì)應(yīng)的插槽分別起個(gè)名字，方便后邊插入父組件將內(nèi)容根據(jù)name來填充對(duì)應(yīng)的內(nèi)容。

作用域插槽：<slot :自定義name=data中的屬性或?qū)ο?gt;</slot>

4.Vue中常用的指令有哪些，以及功能？

? ? ? ? v-model雙向綁定數(shù)據(jù)

? ? ? ? v-cloak 解決插值表達(dá)式的閃爍問題

? ? ? ? v-for循環(huán)

? ? ? ? v-if 元素的存在與否

? ? ? ? v-else 搭配v-if使用

? ? ? ? v-else-if搭配v-if使用

? ? ? ? v-bind 屬性綁定

? ? ? ? v-style 通過v-bind實(shí)現(xiàn)style的綁定

? ? ? ? v-class 通過v-bind實(shí)現(xiàn)class的綁定

? ? ? ? v-on 事件綁定

? ? ? ? v-text 讀取文本（會(huì)解析標(biāo)簽）

? ? ? ? v-html 讀取文本（不會(huì)解析標(biāo)簽）

? ? ? ? v-once 只渲染一次

? ? ? ? v-pre 把標(biāo)簽內(nèi)部的元素原位輸出

? ? ? ? v-show 是否顯示

5.vue組件通信是如何實(shí)現(xiàn)？

? ? ? ? 父傳子：通過props接收

? ? ? ? 子傳父：父組件向子組件傳遞事件方法，子組件通過$emit觸發(fā)事件，回調(diào)給父組件

? ? ? ? $parent / $children：訪問父 / 子實(shí)例

? ? ? ? ? ? ? ? $parent ：訪問父實(shí)例，如果當(dāng)前實(shí)例有的話。

? ? ? ? ? ? ? ? $children:當(dāng)前實(shí)例的直接子組件。

? ? ? ? ? ? ? ? ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例

? ? ? ? $attrs:包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。

? ? ? ? $listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。

·? provide/inject:vue2.2.0 新增API,以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

provide / inject API主要解決了跨級(jí)組件間的通信問題，不過它的使用場景，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系。

6.Vue中computed，watch和methods有什么區(qū)別？

? ? ? ? computed是計(jì)算屬性,具有緩存性。

當(dāng)頁面中有某些數(shù)據(jù)依賴其他數(shù)據(jù)進(jìn)行變動(dòng)的時(shí)候，可以使用計(jì)算屬性computed。

用于依賴發(fā)生變化時(shí)，觸發(fā)屬性重新計(jì)算。

Computed本質(zhì)是一個(gè)具備緩存的watcher，依賴的屬性發(fā)生變化就會(huì)更新視圖。 適用于計(jì)算比較消耗性能的計(jì)算場景。

? ? ? ? watch更多的是「觀察」的作用,類似于某些數(shù)據(jù)的監(jiān)聽回調(diào),用于觀察props,$emit或者本組件的值,當(dāng)數(shù)據(jù)變化時(shí)來執(zhí)行回調(diào)進(jìn)行后續(xù)操作。

無緩存性，頁面重新渲染時(shí)值不變化也會(huì)執(zhí)行。

Watch沒有緩存性，更多的是觀察的作用，可以監(jiān)聽某些數(shù)據(jù)執(zhí)行回調(diào)。當(dāng)我們需要深度監(jiān)聽對(duì)象中的屬性時(shí)，可以打開deep：true選項(xiàng)，這樣便會(huì)對(duì)對(duì)象中的每一項(xiàng)進(jìn)行監(jiān)聽。這樣會(huì)帶來性能問題，優(yōu)化的話可以使用字符串形式監(jiān)聽，如果沒有寫到組件中，不要忘記使用unWatch手動(dòng)注銷。

? ? ? ? 應(yīng)用場景：

當(dāng)我們要進(jìn)行數(shù)值計(jì)算,而且依賴于其他數(shù)據(jù)，那么把這個(gè)數(shù)據(jù)設(shè)計(jì)為computed。

如果你需要在某個(gè)數(shù)據(jù)變化時(shí)做一些事情，使用watch來觀察這個(gè)數(shù)據(jù)變化。

7.什么是vue生命周期？每個(gè)生命周期的作用是什么？

? ? ? ? vue生命周期是指vue是對(duì)象從創(chuàng)建到銷毀的過程。

? ? ? ? 在vue生命周期的不同階段通過對(duì)應(yīng)的鉤子函數(shù)來實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能。

? ? ? ? 創(chuàng)建階段：

? ? ? ? ? ? ? ? beforecreate：實(shí)例已經(jīng)初始化，但不能獲取DOM節(jié)點(diǎn)。(沒有data，沒有el)

? ? ? ? ? ? ? ? created:實(shí)例已經(jīng)創(chuàng)建，仍然不能獲取DOM節(jié)點(diǎn)。(有data，沒有el)

? ? ? ? 載入階段：

? ? ? ? ? ? ? ? beforemount：模板編譯完成，但還沒掛載到界面上。(有data，有el)

? ? ? ? ? ? ? ? mounted：編譯好的模板已掛載到頁面中(數(shù)據(jù)和DOM都已經(jīng)渲染出來)。

? ? ? ? 更新階段：

? ? ? ? ? ? ? ? beforeupdate：數(shù)據(jù)發(fā)生變化立即調(diào)用，此時(shí)data中數(shù)據(jù)是最新的，但頁面上數(shù)據(jù)仍然是舊的(檢測到數(shù)據(jù)更新時(shí)，但DOM更新前執(zhí)行)。

? ? ? ? ? ? ? ? updated：更新結(jié)束后執(zhí)行，此時(shí)data中的值和頁面上的值都是最新的。

? ? ? ? 銷毀階段：

? ? ? ? ? ? ? ? beforedestroy：當(dāng)要銷毀vue實(shí)例時(shí)，在銷毀之前執(zhí)行。

? ? ? ? ? ? ? ? destroy：在銷毀vue實(shí)例時(shí)執(zhí)行。

8.Keep-alive的作用是什么？使用它的目的是什么？

? ? ? ? keep-alive可以實(shí)現(xiàn)組件緩存，當(dāng)組件切換時(shí),主要用于保留組件狀態(tài)或避免重新渲染

? ? ? ? 使用場景：比如有一個(gè)列表和一個(gè)詳情，那么用戶就會(huì)經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁面，那么就可以對(duì)列表組件使用<keep-alive></keep-alive>進(jìn)行緩存，這樣用戶每次返回列表的時(shí)候，都能從緩存中快速渲染，而不是重新渲染

? ? ? ? 常用的兩個(gè)屬性include/exclude，允許組件有條件的進(jìn)行緩存

? ? ? ? 兩個(gè)生命周期activated/deactivated，用來得知當(dāng)前組件是否處于活躍狀態(tài)

9.什么是addRoute，有什么作用？

? ? ? ? AddRoute是動(dòng)態(tài)添加路由，主要作用是添加靜態(tài)路由

10.NextTick的實(shí)現(xiàn)原理？

? ? ? ? nextTick可以讓我們?cè)谙麓?DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，用于獲得更新后的 DOM

11.Mixins有什么作用，如何使用？

? ? ? ? Mixins是可以提取vue各個(gè)組件內(nèi)中可復(fù)用的方法（包含了生命周期）

Mixins 允許自己定義樣式，這些樣式可以在全局樣式表里重用，而不用去借助一些無語義的類，比如.float-left。Mixins可以包含完整的CSS樣式規(guī)則和其他Sass中的特性規(guī)則等。mixin還可以接收參數(shù)，不同的參數(shù)值將產(chǎn)生不同的樣式規(guī)則。

12.$route和$router的區(qū)別？

? ? ? ? $route是“路由信息對(duì)象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。

? ? ? ? 而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等

13.vue-router有哪些導(dǎo)航守衛(wèi)函數(shù)？

? ? ? ? 全局前置守衛(wèi)router.beforeEach(to,from,next){} 調(diào)用next（）才執(zhí)行

? ? ? ? 全局后置守衛(wèi)router.afterEach(to,from,next){}? 沒有next方法

? ? ? ? 全局解析守衛(wèi)router.beforeResolve(to,from,next){}調(diào)用next（）才執(zhí)行

? ? ? ? 路由獨(dú)享守衛(wèi) beforeEnter(to,from,next){}調(diào)用next

? ? ? ? 組件內(nèi)守衛(wèi) beforeRouteEnter(to,from,next){進(jìn)入}調(diào)用next

? ? ? ? beforeRouteLeave(to,from,next){離開}調(diào)用next

? ? ? ? beforeRouteUpdate(to,from,next){}在重用的組件中調(diào)用

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

? ? ? ? to:目標(biāo)路由對(duì)象? 進(jìn)入

? ? ? ? from:準(zhǔn)備要離開的路由

? ? ? ? next():進(jìn)行管道中的下一個(gè)鉤子?？蓚鬟f參數(shù)有布爾值false，直接寫路徑'/'或{path:'/'},回調(diào)函數(shù)

14.Vue中key值的作用？

? ? ? ? ·? key是為Vue中的vnode標(biāo)記的唯一id,通過這個(gè)key,我們的diff操作可以更準(zhǔn)確、更快速。

? ? ? ? ·? diff算法的過程中,先會(huì)進(jìn)行新舊節(jié)點(diǎn)的首尾交叉對(duì)比,當(dāng)無法匹配的時(shí)候會(huì)用新節(jié)點(diǎn)的key與舊節(jié)點(diǎn)進(jìn)行比對(duì),然后超出差異。

? ? ? ? ·? 簡單來說，主要是為了高效的更新虛擬DOM。另外vue中在使用相同標(biāo)簽名元素的過渡切換時(shí)，也會(huì)使用到key屬性，其目的也是為了讓vue可以區(qū)分它們

15.vue中v-model雙向綁定原理？

? ? ? ? v-model本質(zhì)就是一個(gè)語法糖，可以看成是value + input方法的語法糖?？梢酝ㄟ^model屬性的prop和event屬性來進(jìn)行自定義。原生的v-model，會(huì)根據(jù)標(biāo)簽的不同生成不同的事件和屬性

16.Vue中hash模式和history模式的區(qū)別？

? ? ? ? hash模式是依靠onhashchange事件(監(jiān)聽location.hash的改變)

? ? ? ? history模式是主要是依靠的HTML5 history中新增的兩個(gè)方法，pushState()可以改變url地址且不會(huì)發(fā)送請(qǐng)求，replaceState()可以讀取歷史記錄棧,還可以對(duì)瀏覽器記錄進(jìn)行修改。

? ? ? ? Hash是有#號(hào)的

? ? ? Hash模式和history模式它們地址欄里面顯示方式不同，Hash可以通過地址欄直接加載，history不可以通過地址欄直接加載

17.vue的響應(yīng)式原理中Object.defineProperty有什么缺陷？

? ? ? ? Object.defineProperty 無法監(jiān)控到數(shù)組下標(biāo)的變化，導(dǎo)致通過數(shù)組下標(biāo)添加元素，不能實(shí)時(shí)響應(yīng)；

? ? ? ? Object.defineProperty只能劫持對(duì)象的屬性，從而需要對(duì)每個(gè)對(duì)象，每個(gè)屬性進(jìn)行遍歷，如果，屬性值是對(duì)象，還需要深度遍歷。Proxy 可以劫持整個(gè)對(duì)象，并返回一個(gè)新的對(duì)象

? ? ? ? Proxy 不僅可以代理對(duì)象，還可以代理數(shù)組。還可以代理動(dòng)態(tài)增加的屬性

18.寫出對(duì)mvvm的理解？

? ? ? ? MVVM 是 Model-View-ViewModel 的縮寫

? ? ? ? Model:表數(shù)據(jù)模型,因?yàn)樗鼉H僅關(guān)注數(shù)據(jù)本身，不關(guān)心任何行為

? ? ? ? View:用戶操作界面,當(dāng)ViewModel對(duì)Model進(jìn)行更新的時(shí)候，會(huì)通過數(shù)據(jù)綁定更新到View

? ? ? ? ViewModel :業(yè)務(wù)邏輯層,也是View和Model層的橋梁

? ? ? ? 總結(jié)： MVVM模式簡化了界面與業(yè)務(wù)的依賴，解決了數(shù)據(jù)頻繁更新。MVVM 在使用當(dāng)中，利用雙向綁定技術(shù)，使得 Model 變化時(shí)，ViewModel 會(huì)自動(dòng)更新，而 ViewModel 變化時(shí)，View 也會(huì)自動(dòng)變化。

19.Params參數(shù)和query參數(shù)的區(qū)別？

? ? ? ? 用法上：query要用path來引入，params要用name來引入。

? ? ? ? 展示上：query在url中顯示參數(shù)，params在url中不顯示參數(shù)

20.說說你對(duì)spa單頁面應(yīng)用的理解？

? ? ? ? 概念：single-page application是一種特殊的Web應(yīng)用。它將所有的活動(dòng)局限于一個(gè)Web頁面中，僅在該Web頁面初始化時(shí)加載相應(yīng)的HTML、JavaScript、CSS。一旦頁面加載完成，SPA不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或跳轉(zhuǎn)，而是利用JavaScript動(dòng)態(tài)的變換HTML（采用的是div切換顯示和隱藏），從而實(shí)現(xiàn)UI與用戶的交互。

? ? ? 理解：簡單來說SPA的網(wǎng)頁只有一個(gè)頁面，而這個(gè)網(wǎng)頁的實(shí)際方式要能夠回應(yīng)使用者所使用的各種裝置并且賦值使用者在電腦上使用軟件的體驗(yàn)，讓使用者可以更容易和有效的使用網(wǎng)站。按照正常情況下，我們會(huì)在一個(gè)頁面中鏈接到其他的很多個(gè)頁面，進(jìn)行頁面的跳轉(zhuǎn)，但是如果使用單頁面應(yīng)用的話，我們始終在一個(gè)頁面中，通常使用a標(biāo)簽的描點(diǎn)來實(shí)現(xiàn)。

? ? ? 優(yōu)點(diǎn)：

? ? ? ? ? ? ? ? 1.用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染。

? ? ? ? ? ? ? ? 2.基于上面一點(diǎn)，SPA相對(duì)對(duì)服務(wù)器壓力小。

? ? ? 缺點(diǎn)：

? ? ? ? ? ? ? ? 1.以SPA方式開發(fā)的網(wǎng)站不容易管理也不夠安全。

? ? ? ? ? ? ? ? 2.由于所有的內(nèi)容都在一個(gè)頁面中動(dòng)態(tài)替換顯示，所以在SEO上其有著天然的弱勢，所以如果你的站點(diǎn)對(duì)SEO很看重，且要用單頁應(yīng)用，那么就做些靜態(tài)頁面給搜索引擎用吧。

? ? ? ? ? ? ? ? 3.初次加載頁面更耗時(shí)。

? ? ? ? ? ? ? ? 4.因?yàn)闆]有換頁，所以不能使用瀏覽器的前進(jìn)、后退、地址欄等，需要程序進(jìn)行管理；

? ? ? ? ? ? ? ? 5.書簽，需要程序來提供支持；

? ? ? ? ? ? ? ? 6.初次加載耗時(shí)多。為實(shí)現(xiàn)單頁Web應(yīng)用功能及顯示效果，需要在加載頁面的時(shí)候?qū)avaScript、CSS統(tǒng)一加載，部分頁面可以在需要的時(shí)候加載。所以必須對(duì)JavaScript及CSS代碼進(jìn)行合并壓縮處理，如果使用第三方庫，建議使用一些大公司的CDN，因此帶寬的消耗是必然的。