1粒氧、組件間怎么傳值，具體說(shuō)說(shuō)代碼怎樣實(shí)現(xiàn)

• 子傳父：子向父是通過(guò) events（$emit）服赎；通過(guò)父鏈 / 子鏈也可以通信（$parent / $children）迁客；ref 也可以訪問(wèn)組件實(shí)例；provide / inject API摔敛；$attrs/$listeners
• 父?jìng)髯樱焊赶蜃觽鬟f數(shù)據(jù)是通過(guò) props廷蓉，
• 兄弟組件傳值：bus，vuex
• 跨級(jí)父子通信：Bus马昙；Vuex桃犬；provide / inject API、$attrs/$listeners

2给猾、Vue雙向綁定原理

采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式疫萤，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter颂跨，getter敢伸，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)恒削。

1池颈、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)钓丰，如有變動(dòng)可拿到最新值并通知訂閱者
2躯砰、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析携丁，根據(jù)指令模板替換數(shù)據(jù)琢歇，以及綁定相應(yīng)的更新函數(shù)
3、實(shí)現(xiàn)一個(gè)Watcher梦鉴，作為連接Observer和Compile的橋梁李茫，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)肥橙，從而更新視圖

3魄宏、Vue的生命周期和鉤子函數(shù)

生命周期

4搏色、應(yīng)該在vue的生命周期的什么階段發(fā)出ajax請(qǐng)求，為什么

看實(shí)際情況匕得，一般在 created 里面就可以继榆，如果涉及到需要頁(yè)面加載完成之后的話就用 mounted

5、vuex是什么汁掠？怎么使用略吨？哪種功能場(chǎng)景使用它？

VUEX

const store = new Vuex.Store({ //store實(shí)例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
項(xiàng)目特別復(fù)雜的時(shí)候痢缎，可以讓每一個(gè)模塊擁有自己的state、mutation拂共、action牺弄、getters,使得結(jié)構(gòu)非常清晰，方便管理宜狐。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

6势告、Vue路由守衛(wèi)

路由跳轉(zhuǎn)前做一些驗(yàn)證蛇捌，比如登錄驗(yàn)證，是網(wǎng)站中的普遍需求咱台。對(duì)此络拌，vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)。

全局守衛(wèi)

你可以使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

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

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
• from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
• next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子回溺。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)春贸，確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved

舉一個(gè)例子：

1. 列舉需要判斷登錄狀態(tài)的“路由集合”遗遵，當(dāng)跳轉(zhuǎn)至集合中的路由時(shí)萍恕，如果“未登錄狀態(tài)”，則跳轉(zhuǎn)到登錄頁(yè)面LoginPage车要；
2. 當(dāng)直接進(jìn)入登錄頁(yè)面LoginPage時(shí)允粤，如果“已登錄狀態(tài)”，則跳轉(zhuǎn)到首頁(yè)HomePage翼岁；

7类垫、常用的vue指令，Vue的自定義指令怎么做

常用的vue指令有v-if琅坡、v-show悉患，v-for，v-model等等

• 創(chuàng)建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 創(chuàng)建指令(可以多個(gè))
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對(duì)DOM進(jìn)行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

• 全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

• 指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

8榆俺、Vue登錄流程售躁？需要做什么驗(yàn)證

在前后端完全分離的情況下，Vue項(xiàng)目中實(shí)現(xiàn)token驗(yàn)證大致思路如下：

• 第一次登錄的時(shí)候谴仙，前端調(diào)后端的登陸接口迂求，發(fā)送用戶名和密碼
• 后端收到請(qǐng)求碾盐，驗(yàn)證用戶名和密碼晃跺，驗(yàn)證成功，就給前端返回一個(gè)token
• 前端拿到token毫玖，將token存儲(chǔ)到localStorage和vuex中掀虎，并跳轉(zhuǎn)路由頁(yè)面
• 前端每次跳轉(zhuǎn)路由，就判斷 localStroage 中有無(wú) token 付枫，沒(méi)有就跳轉(zhuǎn)到登錄頁(yè)面烹玉，有則跳轉(zhuǎn)到對(duì)應(yīng)路由頁(yè)面
• 每次調(diào)后端接口，都要在請(qǐng)求頭中加token阐滩，我們常用axios的請(qǐng)求庫(kù)中二打，添加全局?jǐn)r截器，將token設(shè)置在請(qǐng)求頭中掂榔。
• 后端判斷請(qǐng)求頭中有無(wú)token继效，有token症杏，就拿到token并驗(yàn)證token，驗(yàn)證成功就返回?cái)?shù)據(jù)瑞信，驗(yàn)證失斃鞑（例如：token過(guò)期）就返回401，請(qǐng)求頭中沒(méi)有token也返回401
• 如果前端拿到狀態(tài)碼為401凡简，就清除token信息并跳轉(zhuǎn)到登錄頁(yè)面

// http request 攔截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判斷是否存在token逼友，如果存在的話，則每個(gè)http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });
 
// http response 攔截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁(yè)面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的錯(cuò)誤信息
});

9秤涩、講一下MVVM中的vm工作流程

MVVM 是 Model-View-ViewModel 的縮寫(xiě)帜乞。
Model代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯筐眷。
View 代表UI 組件挖函，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)。
ViewModel 監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為浊竟、處理用戶交互怨喘，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象，連接Model和View振定。
在MVVM架構(gòu)下必怜，View 和 Model 之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互后频，Model 和 ViewModel 之間的交互是雙向的梳庆， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上卑惜。
ViewModel 通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)膏执，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉露久，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯更米，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理毫痕。

10征峦、Vue和react的區(qū)別？

• react和vue都是做組件化的消请，整體的功能都類似栏笆，但是他們的設(shè)計(jì)思路是有很多不同的。使用react和vue臊泰，主要是理解他們的設(shè)計(jì)思路的不同
• react整體是函數(shù)式的思想蛉加，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過(guò)參數(shù)傳入，所以在react中针饥，是單向數(shù)據(jù)流祟偷，
• 而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的打厘，通過(guò)對(duì)每一個(gè)屬性建立Watcher來(lái)監(jiān)聽(tīng)修肠，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬dom
• react的性能優(yōu)化需要手動(dòng)去做户盯，而vue的性能優(yōu)化是自動(dòng)的嵌施，但是vue的響應(yīng)式機(jī)制也有問(wèn)題，就是當(dāng)state特別多的時(shí)候莽鸭，Watcher也會(huì)很多吗伤，會(huì)導(dǎo)致卡頓
• react是類式的寫(xiě)法，api很少硫眨，而vue是聲明式的寫(xiě)法足淆，通過(guò)傳入各種options，api和參數(shù)都很多
• react可以通過(guò)高階組件（Higher Order Components--HOC）來(lái)擴(kuò)展礁阁，而vue需要通過(guò)mixins來(lái)擴(kuò)展

總結(jié)：react整體的思路就是函數(shù)式巧号，所以推崇純組件，數(shù)據(jù)不可變姥闭，單向數(shù)據(jù)流丹鸿，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合redux-form棚品，而vue是基于可變數(shù)據(jù)的靠欢，支持雙向綁定。react組件的擴(kuò)展一般是通過(guò)高階組件铜跑，而vue組件會(huì)使用mixin门怪。vue內(nèi)置了很多功能，而react做的很少锅纺，很多都是由社區(qū)來(lái)完成的掷空，vue追求的是開(kāi)發(fā)的簡(jiǎn)單，而react更在乎方式是否正確伞广。

11拣帽、Vue里面的插槽

<slot>

是組件的一塊HTML模板疼电，父組件決定這塊模板顯不顯示以及怎么顯示嚼锄。

位置由子組件自身決定（slot現(xiàn)在組件template的什么位置，父組件傳過(guò)來(lái)的模板將來(lái)就顯示在什么位置）

匿名插槽：只能有一個(gè)蔽豺，可以放在組件的任何位置

12区丑、Vue-cli2.0和Vue-cli3.0的區(qū)別

用vue-cli3.0版本創(chuàng)建的項(xiàng)目與2.0版本相比較，我們會(huì)發(fā)現(xiàn)，文件目錄少了很多 eg：build沧侥、config可霎，那么如何像vue-cli 2.* 之前關(guān)于端口號(hào)的配置、打包之后的路徑的配置宴杀、圖片的配置等癣朗，到哪里配置呢？旺罢？vue-cli 3.0 可以在項(xiàng)目的根目錄下新建一個(gè) vue.config.js 文件旷余，之前繁瑣的配置都可以在這里直接配置

3.0能直接運(yùn)行單個(gè)組件

3.0有一個(gè)UI管理界面

安裝了2.0版本，要先卸載

13扁达、Vue的路由實(shí)現(xiàn) || vue-router的原理

hash模式：在瀏覽器中符號(hào)“#”正卧，#以及#后面的字符稱之為hash，用window.location.hash讀裙蚪狻炉旷； 特點(diǎn)：hash雖然在URL中，但不被包括在HTTP請(qǐng)求中叉讥；用來(lái)指導(dǎo)瀏覽器動(dòng)作窘行，對(duì)服務(wù)端安全無(wú)用，hash不會(huì)重加載頁(yè)面图仓。 hash 模式下抽高，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 http://www.xxx.com透绩，因此對(duì)于后端來(lái)說(shuō)翘骂，即使沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤帚豪。

history模式：history采用HTML5的新特性碳竟；且提供了兩個(gè)新方法：pushState（），replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改狸臣，以及popState事件的監(jiān)聽(tīng)到狀態(tài)變更莹桅。 history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致烛亦，如 http://www.xxx.com/items/id诈泼。后端如果缺少對(duì) /items/id 的路由處理，將返回 404 錯(cuò)誤煤禽。Vue-Router 官網(wǎng)里如此描述：“不過(guò)這種模式要玩好铐达，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源檬果，則應(yīng)該返回同一個(gè) index.html 頁(yè)面瓮孙，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面唐断。”

14杭抠、vue路由的鉤子函數(shù)

首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)脸甘，beforeEach，afterEach等偏灿，一般用于頁(yè)面title的修改丹诀。一些需要登錄才能調(diào)整頁(yè)面的重定向功能。

beforeEach主要有3個(gè)參數(shù)to翁垂，from忿墅，next：

to：route即將進(jìn)入的目標(biāo)路由對(duì)象，

from：route當(dāng)前導(dǎo)航正要離開(kāi)的路由

next：function一定要調(diào)用該方法resolve這個(gè)鉤子沮峡。執(zhí)行效果依賴next方法的調(diào)用參數(shù)疚脐。可以控制網(wǎng)頁(yè)的跳轉(zhuǎn)邢疙。

15棍弄、對(duì)keep-alive 的了解

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中疟游，防止重復(fù)渲染DOM呼畸。

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例颁虐，而不是銷毀它們蛮原。

<keep-alive> 與 <transition>相似，只是一個(gè)抽象組件另绩，它不會(huì)在DOM樹(shù)中渲染(真實(shí)或者虛擬都不會(huì))儒陨，也不在父組件鏈中存在，比如：你永遠(yuǎn)在 this.$parent 中找不到 keep-alive 笋籽。

keep-alive生命周期鉤子函數(shù)：activated蹦漠、deactivated

使用<keep-alive>會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)车海，需要在activated階段獲取數(shù)據(jù)笛园，承擔(dān)原來(lái)created鉤子中獲取數(shù)據(jù)的任務(wù)。

被包含在 <keep-alive> 中創(chuàng)建的組件侍芝，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated

activated：在組件被激活時(shí)調(diào)用研铆，在組件第一次渲染時(shí)也會(huì)被調(diào)用，之后每次keep-alive激活時(shí)被調(diào)用州叠。

deactivated：在組件被停用時(shí)調(diào)用棵红。

注意：只有組件被 keep-alive 包裹時(shí)，這兩個(gè)生命周期才會(huì)被調(diào)用留量，如果作為正常組件使用窄赋，是不會(huì)被調(diào)用哟冬，以及在 2.1.0 版本之后楼熄，使用 exclude 排除之后忆绰，就算被包裹在 keep-alive 中，這兩個(gè)鉤子依然不會(huì)被調(diào)用可岂！另外在服務(wù)端渲染時(shí)此鉤子也不會(huì)被調(diào)用的错敢。

什么時(shí)候獲取數(shù)據(jù)？

當(dāng)引入keep-alive 的時(shí)候缕粹，頁(yè)面第一次進(jìn)入稚茅，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated平斩。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)亚享，只觸發(fā)activated。

16绘面、DOM 和虛擬DOM的區(qū)別 以及你對(duì)于他們了解

DOM的本質(zhì)：DOM是瀏覽器概念欺税，瀏覽器從服務(wù)器端讀取html頁(yè)面，瀏覽器將html解析成一棵元素嵌套關(guān)系的dom樹(shù)揭璃，用對(duì)象來(lái)表示頁(yè)面上的元素晚凿，并提供操作dom對(duì)象的api。

虛擬DOM：框架概念瘦馍，程序員用js對(duì)象來(lái)模擬頁(yè)面上dom元素的嵌套關(guān)系( 本質(zhì) )歼秽，為了實(shí)現(xiàn)頁(yè)面元素的高效更新( 目的 )

虛擬DOM是真實(shí)DOM結(jié)構(gòu)的映射，即一個(gè)數(shù)據(jù)集合

17情组、vue指令的生命周期

自定義指令有五個(gè)生命周期（也叫鉤子函數(shù)）燥筷，分別是 bind,inserted,update,componentUpdated,unbind

• bind:只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用院崇，用這個(gè)鉤子函數(shù)可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化動(dòng)作荆责。
• inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于document中）亚脆。
• update:被綁定于元素所在的模板更新時(shí)調(diào)用做院，而無(wú)論綁定值是否變化。通過(guò)比較更新前后的綁定值濒持，可以忽略不必要的模板更新键耕。
• componentUpdated:被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
• unbind:只調(diào)用一次柑营，指令與元素解綁時(shí)調(diào)用屈雄。

18、vue封裝公共組件（通用組件）需要考慮到什么

開(kāi)發(fā)通用組件是很基礎(chǔ)且重要的工作官套，通用組件必須具備高性能酒奶、低耦合的特性

一蚁孔、數(shù)據(jù)從父組件傳入

為了解耦，子組件本身就不能生成數(shù)據(jù)惋嚎。即使生成了杠氢，也只能在組件內(nèi)部運(yùn)作，不能傳遞出去另伍。

父對(duì)子傳參鼻百，就需要用到 props，但是通用組件的的應(yīng)用場(chǎng)景比較復(fù)雜摆尝，對(duì) props 傳遞的參數(shù)應(yīng)該添加一些驗(yàn)證規(guī)則

二温艇、在父組件處理事件

在通用組件中，通常會(huì)需要有各種事件堕汞，

比如復(fù)選框的 change 事件勺爱，或者組件中某個(gè)按鈕的 click 事件

這些事件的處理方法應(yīng)當(dāng)盡量放到父組件中，通用組件本身只作為一個(gè)中轉(zhuǎn)

三讯检、記得留一個(gè) slot

一個(gè)通用組件琐鲁，往往不能夠完美的適應(yīng)所有應(yīng)用場(chǎng)景

所以在封裝組件的時(shí)候，只需要完成組件 80% 的功能视哑，剩下的 20% 讓父組件通過(guò) solt 解決

四绣否、不要依賴 Vuex

父子組件之間是通過(guò) props 和 自定義事件 來(lái)傳參，非父子組件通常會(huì)采用 Vuex 傳參

但是 Vuex 的設(shè)計(jì)初衷是用來(lái)管理組件狀態(tài)挡毅，雖然可以用來(lái)傳參蒜撮，但并不推薦

因?yàn)?Vuex 類似于一個(gè)全局變量，會(huì)一直占用內(nèi)存

在寫(xiě)入數(shù)據(jù)龐大的 state 的時(shí)候跪呈，就會(huì)產(chǎn)生內(nèi)存泄露

五段磨、合理運(yùn)用 scoped 編寫(xiě) CSS

在編寫(xiě)組件的時(shí)候，可以在 <style> 標(biāo)簽中添加 scoped耗绿，讓標(biāo)簽中的樣式只對(duì)當(dāng)前組件生效

但是一味的使用 scoped苹支，肯定會(huì)產(chǎn)生大量的重復(fù)代碼

所以在開(kāi)發(fā)的時(shí)候，應(yīng)該避免在組件中寫(xiě)樣式

當(dāng)全局樣式寫(xiě)好之后误阻，再針對(duì)每個(gè)組件债蜜，通過(guò) scoped 屬性添加組件樣式

19、父組件怎么調(diào)用子組件里的方法

• 在父組件中：首先要引入子組件 import Child from './child';
• <child ref="mychild"></child>是在父組件中為子組件添加一個(gè)占位究反，ref="mychild"是子組件在父組件中的名字
• 父組件中 components: {　　是聲明子組件在父組件中的名字}
• 在父組件的方法中調(diào)用子組件的方法寻定，很重要 this.$refs.mychild.parentHandleclick("嘿嘿嘿"); parentHandleclick是子組件中的方法

20、css只在當(dāng)前組件起作用

答：在style標(biāo)簽中寫(xiě)入scoped即可 例如：<style scoped></style>

21精耐、v-if 和 v-show 區(qū)別

答：v-if按照條件是否渲染狼速，v-show是display的block或none；

22卦停、router的區(qū)別

答：router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法本股，鉤子函數(shù)等攀痊。

23、vue.js的兩個(gè)核心是什么拄显？

答：數(shù)據(jù)驅(qū)動(dòng)苟径、組件系統(tǒng)

24、vue常用的修飾符躬审？

答：.prevent: 提交事件不再重載頁(yè)面棘街；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)承边；.capture: 事件偵聽(tīng)遭殉，事件發(fā)生的時(shí)候會(huì)調(diào)用

25、v-on 可以綁定多個(gè)方法嗎博助？

答：可以

26险污、vue中 key 值的作用？

答：當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)富岳，它默認(rèn)用“就地復(fù)用”策略蛔糯。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序窖式， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素蚁飒，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。key的作用主要是為了高效的更新虛擬DOM萝喘。

27淮逻、什么是vue的計(jì)算屬性？

答：在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)阁簸，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理爬早，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式强窖。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰凸椿；②依賴于數(shù)據(jù)，數(shù)據(jù)更新翅溺，處理結(jié)果自動(dòng)更新脑漫；③計(jì)算屬性內(nèi)部this指向vm實(shí)例髓抑；④在template調(diào)用時(shí)，直接寫(xiě)計(jì)算屬性名即可优幸；⑤常用的是getter方法吨拍，獲取數(shù)據(jù)，也可以使用set方法改變數(shù)據(jù)网杆；⑥相較于methods羹饰，不管依賴的數(shù)據(jù)變不變，methods都會(huì)重新計(jì)算碳却，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取队秩，不會(huì)重新計(jì)算。

計(jì)算屬性就是當(dāng)其依賴屬性的值發(fā)生變化時(shí)昼浦，這個(gè)屬性的值會(huì)自動(dòng)更新馍资。
<body>
    <div id="app">
         <input type="text" v-model="msg">
         <p>原始字符：{{msg}}</p>
         <p>計(jì)算屬性翻轉(zhuǎn)字符：{{reverseMsg}}</p>
    </div>
    <script>
         new Vue({
             el:'#app',
             data:{
                 msg:'Hello'
             },
             //vue的計(jì)算屬性
             computed:{
                 reverseMsg(){
                     //返回翻轉(zhuǎn)后的字符串，當(dāng)msg變化后reverseMsg會(huì)跟著變化
                     return this.msg.split('').reverse().join('')
                 }
             }
         })
    </script>
</body>

28关噪、vue等單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎn)

答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件鸟蟹，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM使兔、數(shù)據(jù)驅(qū)動(dòng)建钥、組件化、輕量虐沥、簡(jiǎn)潔熊经、高效、快速置蜀、模塊友好奈搜。
缺點(diǎn)：不支持低版本的瀏覽器，最低只支持到IE9盯荤；不利于SEO的優(yōu)化（如果要支持SEO馋吗，建議通過(guò)服務(wù)端來(lái)進(jìn)行渲染組件）；第一次加載首頁(yè)耗時(shí)相對(duì)長(zhǎng)一些秋秤；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)宏粤、后退。

29灼卢、路由之間跳轉(zhuǎn)

聲明式（標(biāo)簽跳轉(zhuǎn)） 編程式（ js跳轉(zhuǎn)）

通過(guò)router-link實(shí)現(xiàn)跳轉(zhuǎn)

30绍哎、Vue中怎么實(shí)現(xiàn)跨域

使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）

例如請(qǐng)求的url:“http://aa.com/demo.json“

1、打開(kāi)config/index.js,在proxyTable中添寫(xiě)如下代碼：

proxyTable: { 
  '/api': {  //使用"/api"來(lái)代替"http://aa.com" 
    target: 'http://aa.com', //源地址 
    changeOrigin: true, //改變?cè)?
    secure:false // 是否使用https
    pathRewrite: { 
      '^/api': '/api' //路徑重寫(xiě) 
      } 
  } 
}

2鞋真、使用axios請(qǐng)求數(shù)據(jù)時(shí)直接使用“/api”

getData () { 
 axios.get('/api/demo.json', function (res) { 
   console.log(res) 
})

31崇堰、Vue首屏加載過(guò)慢的解決方法有哪些

vue首屏加載過(guò)慢的原因

• 網(wǎng)速慢肯定會(huì)導(dǎo)致首屏加載過(guò)慢，但是在這里我們不做討論

• vue項(xiàng)目作為一個(gè)單頁(yè)面應(yīng)用，如果不對(duì)路由進(jìn)行處理海诲，在加載首頁(yè)的時(shí)候繁莹，就會(huì)將所有組件全部加載，并向服務(wù)器請(qǐng)求數(shù)據(jù)特幔，這必將拖慢加載速度咨演；

• 通過(guò)查看Network，發(fā)現(xiàn)整個(gè)網(wǎng)站加載試講長(zhǎng)達(dá)10幾秒蚯斯，加載時(shí)間最長(zhǎng)的就是js馁菜、css文件和媒體文件及圖片

解決方案

• vue-router 路由懶加載

• 在項(xiàng)目開(kāi)發(fā)中子漩，我們會(huì)用到很多第三方庫(kù)土辩，如果可以按需引入潜索，我們可以只引入自己需要的組件，來(lái)減少所占空間撰茎，但也會(huì)有一些不能按需引入嵌牺，我們可以采用CDN外部加載打洼，在index.html中從CDN引入組件龄糊，去掉其他頁(yè)面的組件import，CDN 的全稱是 Content Delivery Network募疮，即內(nèi)容分發(fā)網(wǎng)絡(luò)炫惩。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況阿浓，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度他嚷。

• 關(guān)閉sourcemap，sourcemap是為了方便線上調(diào)試用的芭毙，因?yàn)榫€上代碼都是壓縮過(guò)的筋蓖，導(dǎo)致調(diào)試極為不便，而有了sourcemap退敦，就等于加了個(gè)索引字典粘咖，出了問(wèn)題可以定位到源代碼的位置。 但是侈百，這個(gè)玩意是每個(gè)js都帶一個(gè)sourcemap瓮下，有時(shí)sourcemap會(huì)很大，拖累了整個(gè)項(xiàng)目加載速度钝域，為了節(jié)省加載時(shí)間讽坏，我們將其關(guān)閉掉

  關(guān)閉辦法：去src/config/index.js中改一個(gè)參數(shù)：

  productionSourceMap:false

• 開(kāi)啟gzip壓縮，這個(gè)優(yōu)化是兩方面的例证，前端將文件打包成.gz文件路呜，然后通過(guò)nginx的配置，讓瀏覽器直接解析.gz文件。在http響應(yīng)頭胀葱，但是不是每個(gè)瀏覽器都支持gzip的党涕，我們可以看到content-encoding:gzip，這是指服務(wù)端使用了gzip的壓縮方式巡社。還有一點(diǎn) gzip不壓縮圖片膛堤，因?yàn)閴嚎s之后會(huì)更大- -，所以一般到是壓縮css和js

• 加個(gè)loading效果：首頁(yè)加個(gè)好看的loading阻塞一下晌该，讓用戶別等的那么心焦肥荔。

• 如果首頁(yè)真的有瓶頸，可以考慮用node單獨(dú)做服務(wù)端渲染朝群，而下面的子頁(yè)面仍用spa單頁(yè)的方式交互燕耿。

  服務(wù)端渲染的優(yōu)勢(shì)https://blog.csdn.net/lucky541788/article/details/83932952

32、vue如何實(shí)現(xiàn)按需加載組件

http://www.reibang.com/p/57c88cda0a28

vue來(lái)做一個(gè)單頁(yè)面應(yīng)用姜胖，當(dāng)我們的項(xiàng)目越來(lái)越大誉帅，組件越來(lái)越多的時(shí)候，首次啟動(dòng)項(xiàng)目戶特別慢右莱，就算做一個(gè)加載框蚜锨，蒙層之類的，體驗(yàn)也不會(huì)好慢蜓，這個(gè)時(shí)候就需要按需加載

1亚再、多次進(jìn)出同一個(gè)異步加載頁(yè)面是否會(huì)造成多次加載組件？

2晨抡、在多個(gè)地方使用同一個(gè)異步組件時(shí)是否造成多次加載組件氛悬？

1,2答：否，首次需要用到組件時(shí)瀏覽器會(huì)發(fā)送請(qǐng)求加載組件耘柱，加載完將會(huì)緩存起來(lái)如捅，以供之后再次用到該組件時(shí)調(diào)用

1、vue異步組件實(shí)現(xiàn)路由懶加載

component：() => import('需要加載的路由的地址')

2调煎、es提出的import(推薦使用這種方式)

const HelloWorld = （）=>import('需要加載的模塊地址')

33镜遣、 請(qǐng)說(shuō)下封裝 vue 插件封裝過(guò)程

https://www.jb51.net/article/157120.htm

34、vue項(xiàng)目的多語(yǔ)言處理

Vue已經(jīng)有了這個(gè)多語(yǔ)種的插件汛蝙，vue-i18n

35烈涮、vue中的watch介紹和場(chǎng)景

監(jiān)聽(tīng)并處理data屬性的更新，對(duì)data屬性的監(jiān)聽(tīng)窖剑，說(shuō)明屬性是在data中聲明過(guò)的 屬性更新時(shí)調(diào)用監(jiān)聽(tīng)函數(shù)坚洽，可選參數(shù)分別為新值和舊值，對(duì)屬性重新設(shè)置值西土，只要跟原來(lái)的值相等就不會(huì)觸發(fā)函數(shù)調(diào)用讶舰，這一點(diǎn)跟計(jì)算屬性是相似的，

// 基礎(chǔ)用法
watch: {
        activeTab(newValue, oldValue) {
            console.log(newValue, oldValue);
            this.getList();
        }
}
// 函數(shù)體調(diào)用Vue實(shí)例的方法可簡(jiǎn)寫(xiě)
watch: {
        activeTab: 'getList'
}

屬性初始化的值默認(rèn)不會(huì)觸發(fā)監(jiān)聽(tīng)，解決辦法添加說(shuō)明immediate:true跳昼，表示監(jiān)聽(tīng)初始值般甲，此時(shí)使用handler寫(xiě)法.

watch: {
        activeTab: {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
                this.getList();
            },
            // 立即執(zhí)行handler函數(shù)
            immediate: true
        }
    }

當(dāng)被監(jiān)聽(tīng)的屬性為對(duì)象時(shí)，默認(rèn)不會(huì)監(jiān)聽(tīng)對(duì)象內(nèi)部屬性的變化鹅颊，而是只監(jiān)聽(tīng)屬性被賦值時(shí)的變化敷存，解決辦法添加說(shuō)明deep:true（默認(rèn)為false），此時(shí)監(jiān)聽(tīng)器會(huì)深度遍歷給對(duì)象的每一個(gè)屬性都帶上監(jiān)聽(tīng)器堪伍，更新寫(xiě)法

// 監(jiān)聽(tīng)對(duì)象的所有屬性(性能消耗大)
watch: {
        activeTab: {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
                this.getList();
            },
            // 深度監(jiān)聽(tīng)
            deep: true
        }
    }
// 監(jiān)聽(tīng)對(duì)象的某些屬性(優(yōu)化:采用單獨(dú)監(jiān)聽(tīng))
watch: {
        'activeTab.index': {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
                this.getList();
            }
        }
    }

另外組件中的監(jiān)聽(tīng)器會(huì)隨組件的注銷而注銷锚烦，不會(huì)造成內(nèi)存溢出，但如果使用命令式的（ vm.$watch）全局的監(jiān)聽(tīng)器需要手動(dòng)注銷才行