一叶撒、js基礎(chǔ)

1、簡(jiǎn)述同步和異步的區(qū)別
同步是阻塞模式贪嫂，異步是非阻塞模式寺庄。
同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，若該請(qǐng)求需要一段時(shí)間才能返回信息力崇，那么這個(gè)進(jìn)程將會(huì)一直等待下去斗塘，直到收到返回信息才繼續(xù)執(zhí)行下去;
異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作亮靴，不管其他進(jìn)程的狀態(tài)馍盟。當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率茧吊。

2贞岭、JS的執(zhí)行機(jī)制
先執(zhí)行執(zhí)行棧中的同步任務(wù)
異步任務(wù)（回調(diào)函數(shù)）放入任務(wù)隊(duì)列中
一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)會(huì)按次序讀取任務(wù)隊(duì)列中的異步任務(wù)搓侄，于是被讀取的異步任務(wù)結(jié)束等待狀態(tài)瞄桨，進(jìn)入執(zhí)行棧，開(kāi)始執(zhí)行讶踪，執(zhí)行完之后芯侥，主線程再查詢?nèi)蝿?wù)隊(duì)列有沒(méi)有任務(wù)，有就取出來(lái)放到執(zhí)行棧中執(zhí)行
由于主線程不斷重復(fù)的獲得任務(wù)乳讥、執(zhí)行任務(wù)柱查、再獲得任務(wù)、再執(zhí)行云石，所以這種機(jī)制被稱為事件循環(huán)（eventloop）

3唉工、JS為什么是單線程的
最初設(shè)計(jì)JS是用來(lái)在瀏覽器驗(yàn)證表單操控DOM元素的是一門(mén)腳本語(yǔ)言，如果js是多線程的留晚，那么兩個(gè)線程同時(shí)對(duì)一個(gè)DOM元素進(jìn)行了相互沖突的操作酵紫，那么瀏覽器的解析器是無(wú)法執(zhí)行的告嘲。

4错维、防抖和節(jié)流的什么區(qū)別和使用場(chǎng)景
防抖：
高頻率觸發(fā)的事件,在指定的單位時(shí)間內(nèi)，只響應(yīng)最后一次橄唬，如果在指定的時(shí)間在觸發(fā)赋焕，則重新計(jì)算時(shí)間(后面觸發(fā)的事件執(zhí)行，替代了前面的事件)

節(jié)流：
高頻率觸發(fā)的事件,在指定的單位時(shí)間內(nèi)仰楚，只響應(yīng)第一次(前面觸發(fā)的執(zhí)行前隆判，忽略后面的事件)
防抖和節(jié)流的使用場(chǎng)景
防抖（debounce）
1.search搜索聯(lián)想犬庇，用戶在不斷輸入值時(shí)，用防抖來(lái)節(jié)約請(qǐng)求資源侨嘀。
2.window觸發(fā)resize的時(shí)候臭挽，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件，用防抖來(lái)讓其只觸發(fā)一次

節(jié)流（throttle）
1.鼠標(biāo)不斷點(diǎn)擊觸發(fā)咬腕，mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)
2.監(jiān)聽(tīng)滾動(dòng)事件欢峰，比如是否滑到底部自動(dòng)加載更多，用throttle來(lái)判斷

5涨共、var纽帖、let、const之間的區(qū)別
var聲明變量可以重復(fù)聲明举反，而let不可以重復(fù)聲明
var是不受限于塊級(jí)的懊直，而let是受限于塊級(jí)
var會(huì)與window相映射（會(huì)掛一個(gè)屬性），而let不與window相映射
var可以在聲明的上面訪問(wèn)變量火鼻，而let有暫存死區(qū)室囊，在聲明的上面訪問(wèn)變量會(huì)報(bào)錯(cuò)
const聲明之后必須賦值，否則會(huì)報(bào)錯(cuò)
const定義不可變的量魁索，改變了就會(huì)報(bào)錯(cuò)
const和let一樣不會(huì)與window相映射波俄、支持塊級(jí)作用域、在聲明的上面訪問(wèn)變量會(huì)報(bào)錯(cuò)

6蛾默、JS的基本數(shù)據(jù)類型
Undefined懦铺、Null、Boolean支鸡、Number冬念、String、Object 新增:Symbol

7牧挣、setimeout在1s后一定會(huì)執(zhí)行嗎
不一定急前。只有在同步任務(wù)執(zhí)行完畢之后，任務(wù)對(duì)列中的異步任務(wù)才能進(jìn)入主線程開(kāi)始執(zhí)行

8瀑构、策略模式 （很多if else怎么優(yōu)化）
if/else可以說(shuō)在項(xiàng)目中遇到頻率是最高裆针，通常可以這兩種策略優(yōu)化

（1）寺晌、排非策略

if (!user || !password) return throw('用戶名和密碼不能為空!')
// 邏輯處理

（2）世吨、三元運(yùn)算符

let str = true ?  '是' :  '否' 

（3）、switch
（4）呻征、key-value

let enums = {
  'A': handleA,
  'B': handleB,
  'C': handleC,
  'D': handleD,
  'E': handleE
}
function action(val){
  let handleType = enums[val]
  handleType()
}

（5）耘婚、map

let enums = new Map([
  ['A', handleA],
  ['B', handleB],
  ['C', handleC],
  ['D', handleD],
  ['E', handleE]
])
 
function action(val){
  let handleType = enums(val)
  handleType()
}

9、數(shù)組的原生方法

push(), pop(), shift(), unshift(), splice(), sort(), reverse(), concat()和slice()

10陆赋、字符串的原生方法

//定位：
charAt() //返回在指定位置的字符沐祷；
charCodeAt() //返回在指定位置的字符的Unicode編碼嚷闭；

indexOf() //返回某個(gè)制動(dòng)的字符值在字符串中首次出現(xiàn)的位置；
lastIndexOf() //從后向前搜索字符串赖临；

//合并/截劝獭：
concat() //合并字符串
slice() //提取字符串片段
substr() //此方法和slice()提取片段效果是一樣的，參數(shù)也一樣
substring() //此方法和slice()提取片段效果是一樣的兢榨，參數(shù)也一樣

//slice胜蛉、substr、substring三者的用途是一樣的色乾，只是截取開(kāi)閉區(qū)間的問(wèn)題（eg： slice(2, 5)）

match() //查找匹配的字符串誊册；
replace() //查找到匹配的字符串，并替換掉暖璧；

//字符串和數(shù)組的相互轉(zhuǎn)換方法：
split() //把字符串轉(zhuǎn)換成數(shù)組案怯；
join() //把數(shù)組轉(zhuǎn)換成字符串；

11澎办、axios前置操攔截器和后置攔截器

//1 使用axios前置攔截器嘲碱，讓所有的請(qǐng)求都攜帶token
axios.interceptors.request.use(config=>{
    //攜帶token
    let uToken =  localStorage.getItem("token");
    if(uToken){
        //我就在請(qǐng)求頭里面添加一個(gè)頭信息叫做U-TOKEN ==》jsessionid(token) 后臺(tái)通過(guò)token作為key值可以在redis中獲得loginUser的信息
        config.headers['U-TOKEN']=uToken;
    }
    return config;
},error => {
    Promise.reject(error);
});

// 使用：在axios發(fā)送請(qǐng)求后，得到一個(gè)res對(duì)象局蚀，進(jìn)行回調(diào)函數(shù)前的攔截器
//2 使用axios后置攔截器麦锯，處理沒(méi)有登錄請(qǐng)求
axios.interceptors.response.use(res=>{
    let {success, result} = res.data;
    //用戶沒(méi)有登錄
    if(!success && result==="noUser"){
        //跳轉(zhuǎn)登錄界面
        location.href = "/login.html";
        return;
    }
    //后臺(tái)redis用戶已經(jīng)過(guò)期了
    if(!success && result==="expireUser"){
        //移除localStorage
        localStorage.removeItem("token");
        localStorage.removeItem("loginUser");
        //跳轉(zhuǎn)登錄界面
        location.href = "/login.html";
        return;
    }
    return res;
},error => {
    Promise.reject(error);
})

12、axios取消請(qǐng)求

運(yùn)用cancalToken

參考：http://www.reibang.com/p/761114cbba68

13琅绅、淺拷貝與深拷貝
淺拷貝是創(chuàng)建一個(gè)新對(duì)象扶欣，這個(gè)對(duì)象有著原始對(duì)象屬性值的一份精確拷貝。如果屬性是基本類型千扶，拷貝的就是基本類型的值料祠，如果屬性是引用類型，拷貝的就是內(nèi)存地址 澎羞，所以如果其中一個(gè)對(duì)象改變了這個(gè)地址髓绽，就會(huì)影響到另一個(gè)對(duì)象。

深拷貝是將一個(gè)對(duì)象從內(nèi)存中完整的拷貝一份出來(lái),從堆內(nèi)存中開(kāi)辟一個(gè)新的區(qū)域存放新對(duì)象,且修改新對(duì)象不會(huì)影響原對(duì)象妆绞。

var a1 = {b: {c: {}};

var a2 = shallowClone(a1); // 淺拷貝方法
a2.b.c === a1.b.c // true 新舊對(duì)象還是共享同一塊內(nèi)存

var a3 = deepClone(a3); // 深拷貝方法
a3.b.c === a1.b.c // false 新對(duì)象跟原對(duì)象不共享內(nèi)存

淺拷貝的實(shí)現(xiàn)方式：
（1）Object.assign()
（2）函數(shù)庫(kù)lodash的_.clone方法
（3）展開(kāi)運(yùn)算符...
（4）Array.prototype.concat()
（5）Array.prototype.slice()

深拷貝的實(shí)現(xiàn)方式：
（1）JSON.parse(JSON.stringify())
（2）函數(shù)庫(kù)lodash的_.cloneDeep方法
（3）.jQuery.extend()方法
（4）手寫(xiě)遞歸方法

14顺呕、箭頭函數(shù)和普通函數(shù)有什么區(qū)別?

（1）箭頭函數(shù)比普通函數(shù)更加簡(jiǎn)潔
    如果沒(méi)有參數(shù)，就直接寫(xiě)一個(gè)空括號(hào)即可
    如果只有一個(gè)參數(shù)括饶，可以省去參數(shù)括號(hào)
    如果有多個(gè)參數(shù)株茶，用逗號(hào)分割
    如果函數(shù)體的返回值只有一句，可以省略大括號(hào)
    如果函數(shù)體不需要返回值巷帝，且只有一句話忌卤，可以給這個(gè)語(yǔ)句前面加一個(gè)void關(guān)鍵字扫夜。最常用的就是調(diào)用一個(gè)函數(shù)：
    let fn = () => void doesNotReturn()
    
 (2) 箭頭函數(shù)沒(méi)有自己的this
    箭頭函數(shù)不會(huì)創(chuàng)建自己的this,所以它沒(méi)有自己的this,它只會(huì)在自己作用域的上一層繼承this楞泼。
    所以箭頭函數(shù)中的this的指向在它在定義時(shí)一家確定了驰徊，之后不會(huì)改變。
 
（3）箭頭函數(shù)繼承來(lái)的this指向永遠(yuǎn)不會(huì)改變

 (4) call()堕阔、apply()棍厂、bind()等方法不能改變箭頭函數(shù)中的this指向 
 
 (5) 箭頭函數(shù)不能作為構(gòu)造函數(shù)使用
 
 (6) 箭頭函數(shù)沒(méi)有自己的arguments
 
 (7) 箭頭函數(shù)沒(méi)有prototype
 
 (8) 箭頭函數(shù)不能用作Generator函數(shù),不能使用yeild關(guān)鍵字

15、什么是閉包超陆，閉包的作用是什么牺弹？
當(dāng)一個(gè)內(nèi)部函數(shù)被調(diào)用，就會(huì)形成閉包时呀，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)张漂。
閉包作用：
局部變量無(wú)法共享和長(zhǎng)久的保存，而全局變量可能造成變量污染谨娜，所以我們希望有一種機(jī)制既可以長(zhǎng)久的保存變量又不會(huì)造成全局污染航攒。

16、Promise是什么?
Promise 是異步編程的一種解決方案：從語(yǔ)法上講趴梢，promise是一個(gè)對(duì)象漠畜，從它可以獲取異步操作的消息；從本意上講坞靶，它是承諾憔狞，承諾它過(guò)一段時(shí)間會(huì)給你一個(gè)結(jié)果。promise有三種狀態(tài)： pending(等待態(tài))彰阴，fulfiled(成功態(tài))瘾敢，rejected(失敗態(tài)) ；狀態(tài)一旦改變尿这，就不會(huì)再變廉丽。創(chuàng)造promise實(shí)例后，它會(huì)立即執(zhí)行妻味。

17正压、map和foreach有什么區(qū)別
foreach()方法會(huì)針對(duì)每一個(gè)元素執(zhí)行提供得函數(shù),該方法沒(méi)有返回值,是否會(huì)改變?cè)瓟?shù)組取決與數(shù)組元素的類型是基本類型還是引用類型
map()方法不會(huì)改變?cè)瓟?shù)組的值,返回一個(gè)新數(shù)組,新數(shù)組中的值為原數(shù)組調(diào)用函數(shù)處理之后的值

二、http

1. 瀏覽器緩存有哪些责球，通常緩存有哪幾種
   一焦履、http緩存
   二、websql
   cookie
   localstorage
   sessionstorage
   flash緩存

2雏逾、請(qǐng)描述一下cookies嘉裤，sessionStorage和localStorage的區(qū)別
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀栖博。因此sessionStorage不是一種持久化的本地存儲(chǔ)屑宠，僅僅是會(huì)話級(jí)別的存儲(chǔ)。而localStorage用于持久化的本地存儲(chǔ)仇让，除非主動(dòng)刪除數(shù)據(jù)典奉，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的躺翻。
web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的卫玖。Cookie的大小是受限的公你，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬假瞬，另外cookie還需要指定作用域陕靠，不可以跨域調(diào)用。
除此之外脱茉，Web Storage擁有setItem,getItem,removeItem,clear等方法剪芥，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie，getCookie琴许。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互粗俱，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生虚吟。

3寸认、如何解決跨域問(wèn)題
跨域的概念：協(xié)議、域名串慰、端口都相同才同域偏塞，否則都是跨域
解決跨域問(wèn)題：
1、使用JSONP（json+padding）把數(shù)據(jù)內(nèi)填充起來(lái)
2邦鲫、CORS方式（跨域資源共享）灸叼，在后端上配置可跨域
3、服務(wù)器代理庆捺，通過(guò)服務(wù)器的文件能訪問(wèn)第三方資源

三古今、css

1、行內(nèi)元素和塊級(jí)元素
行內(nèi)元素（display: inline）
寬度和高度是由內(nèi)容決定滔以，與其他元素共占一行的元素捉腥，我們將其叫行內(nèi)元素，例如：<span> 你画、 <i> 抵碟、 <a>等
塊級(jí)元素（display: block)
默認(rèn)寬度由父容器決定，默認(rèn)高度由內(nèi)容決定坏匪，獨(dú)占一行并且可以設(shè)置寬高的元素拟逮，我們將其叫做塊級(jí)元素，例如：<p> 适滓、<div> 敦迄、<ul>等

2、絕對(duì)定位和相對(duì)定位的區(qū)別
position: absolute
絕對(duì)定位：是相對(duì)于元素最近的已定位的祖先元素
position: relative
相對(duì)定位：相對(duì)定位是相對(duì)于元素在文檔中的初始位置

3、flex布局
Flex常見(jiàn)的屬性 flex：1代表什么?

flex實(shí)際上是flex-grow罚屋、flex-shrink和flex-basis三個(gè)屬性的縮寫(xiě)苦囱。
flex-grow: 1
flex-shrink: 1
flex-basis: 0%

4、媒體查詢是什么

5沿后、Rem你是怎么做適配的

四沿彭、vue

1朽砰、Vue生命周期總共有幾個(gè)階段尖滚？
它可以總共分為8個(gè)階段：
創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后
beforeCreate 組件實(shí)例被創(chuàng)建之初
created 組件實(shí)例已經(jīng)完全創(chuàng)建
beforeMount 組件掛載之前
mounted 組件掛載到實(shí)例上去之后
beforeUpdate 組件數(shù)據(jù)發(fā)生變化，更新之前
updated 數(shù)據(jù)數(shù)據(jù)更新之后
beforeDestroy 組件實(shí)例銷毀之前
destroyed 組件實(shí)例銷毀之后

2瞧柔、DOM渲染在哪個(gè)周期中就已經(jīng)完成漆弄？

created 實(shí)例已經(jīng)創(chuàng)建完成調(diào)用
mounted 實(shí)例已經(jīng)掛在完成調(diào)用

在created都可以操作dom節(jié)點(diǎn)，
一般Ajax都放在created或者mounted中造锅。

3撼唾、v-show與v-if區(qū)別
v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建
使用 頻繁切換時(shí)用v-show哥蔚，運(yùn)行時(shí)較少改變時(shí)用v-if
v-if=‘false’ v-if是條件渲染倒谷，當(dāng)false的時(shí)候不會(huì)渲染

4、vue開(kāi)發(fā)中常用的指令有哪些

5糙箍、computed和watch有什么區(qū)別?
computed:

1. computed是計(jì)算屬性,也就是計(jì)算值,它更多用于計(jì)算值的場(chǎng)景
2. computed具有緩存性,computed的值在getter執(zhí)行后是會(huì)緩存的渤愁，只有在它依賴的屬性值改變之后，下一次獲取computed的值時(shí)才會(huì)重新調(diào)用對(duì)應(yīng)的getter來(lái)計(jì)算
3. computed適用于計(jì)算比較消耗性能的計(jì)算場(chǎng)景
   復(fù)制代碼watch:
4. 更多的是「觀察」的作用,類似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào),用于觀察props $emit或者本組件的值,當(dāng)數(shù)據(jù)變化時(shí)來(lái)執(zhí)行回調(diào)進(jìn)行后續(xù)操作
5. 無(wú)緩存性深夯，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行

6抖格、Vuex有5種屬性: 分別是 state、getter咕晋、mutation雹拄、action、module;
state
Vuex 使用單一狀態(tài)樹(shù),即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例掌呜，但單一狀態(tài)樹(shù)和模塊化并不沖突滓玖。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)
mutations
mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)
getters
類似vue的計(jì)算屬性质蕉，主要用來(lái)過(guò)濾一些數(shù)據(jù)
action
actions可以理解為通過(guò)將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法呢撞，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)。view 層通過(guò) store.dispath 來(lái)分發(fā) action
總結(jié)
vuex 一般用于中大型 web 單頁(yè)應(yīng)用中對(duì)應(yīng)用的狀態(tài)進(jìn)行管理饰剥，對(duì)于一些組件間關(guān)系較為簡(jiǎn)單的小型應(yīng)用殊霞，使用 vuex 的必要性不是很大，因?yàn)橥耆梢杂媒M件 prop 屬性或者事件來(lái)完成父子組件之間的通信汰蓉，vuex 更多地用于解決跨組件通信以及作為數(shù)據(jù)中心集中式存儲(chǔ)數(shù)據(jù)

7绷蹲、Vue 組件間通信有哪幾種方式？
Vue 組件間通信是面試常考的知識(shí)點(diǎn)之一祝钢，這題有點(diǎn)類似于開(kāi)放題比规，你回答出越多方法當(dāng)然越加分，表明你對(duì) Vue 掌握的越熟練拦英。Vue 組件間通信只要指以下 3 類通信：父子組件通信蜒什、隔代組件通信、兄弟組件通信疤估，下面我們分別介紹每種通信方式且會(huì)說(shuō)明此種方法可適用于哪類組件間通信灾常。
（1）props / parent / parent / emit / attrs/attrs：包含了父作用域中不被 prop 所識(shí)別 (且獲取) 的特性綁定 ( class 和 style 除外 )户敬。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 ( class 和 style 除外 )睁本，并且可以通過(guò) v-bind="listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器呢堰。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件
（5）provide / inject 適用于 隔代組件通信
祖先組件中通過(guò) provider 來(lái)提供變量抄瑟，然后在子孫組件中通過(guò) inject 來(lái)注入變量。 provide / inject API 主要解決了跨級(jí)組件間的通信問(wèn)題枉疼，不過(guò)它的使用場(chǎng)景皮假，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系骂维。
（6）Vuex 適用于 父子惹资、隔代、兄弟組件通信
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式航闺。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）褪测『锾埽“store” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )侮措。
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的懈叹。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化分扎，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新澄成。
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化畏吓。

8墨状、vue-router 有 3 種路由模式：
hash: 使用 URL hash 值來(lái)作路由。支持所有瀏覽器庵佣，包括不支持 HTML5 History Api 的瀏覽器歉胶；
history : 依賴 HTML5 History API 和服務(wù)器配置汛兜。具體可以查看 HTML5 History 模式巴粪；
abstract : 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端粥谬。如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API肛根，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式.

9、history模式會(huì)造成的問(wèn)題
path自定義
需要配置nginx代理刷新重定向 /index.html
location / {
try_files uri/ /index.html;
}
參考：https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

10漏策、vue路由鉤子函數(shù)

路由鉤子函數(shù)有三種：

1：全局鉤子： beforeEach派哲、 afterEach、beforeResolve

2：?jiǎn)蝹€(gè)路由里面的鉤子：  beforeEnter

3:組件路由：beforeRouteEnter掺喻、 beforeRouteUpdate芭届、 beforeRouteLeave

11、路由攔截鉤子

beforeEach

12感耙、store持久化處理

1褂乍、引入vuex-persistedstate組件

安裝 npm install vuex-persistedstate --save
引入及配置：在store下的index.js中

//先引入
import createPersistedState from "vuex-persistedstate"
 
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    permission,
    user
  },
  getters,
  plugins: [createPersistedState({
    storage: window.localStorage,
  })]
})

13、使用keep-alive在頁(yè)面被重新激活時(shí)哪個(gè)鉤子函數(shù)不重新加載
created即硼、mounted

14逃片、事件修飾符

（1）、普通修飾符

.stop 阻止事件冒泡

.prevent 阻止默認(rèn)行為

.capture 事件捕獲

.self 自身觸發(fā)

.once 只觸發(fā)一次

//self 是阻止自身不執(zhí)行冒泡觸發(fā)只酥，不會(huì)阻止冒泡繼續(xù)向外觸發(fā)褥实；
//stop 是從自身開(kāi)始阻止冒泡不向外觸發(fā)。所以self 一般用在父元素上裂允，stop 一般用在子元素上

（2）损离、按鍵修飾符

.enter  
.esc
.tab    
.space
.delete 
.up
.left   
.down
.right  

（3）、鼠標(biāo)修飾符

<!--點(diǎn)擊鼠標(biāo)左鍵觸發(fā)事件：-->
<div @click.left="divEvent">點(diǎn)擊鼠標(biāo)左鍵觸發(fā)事件</div>

<!--點(diǎn)擊鼠標(biāo)右鍵觸發(fā)事件：并阻止默認(rèn)右鍵菜單-->
<div @click.right="divEvent" oncontextmenu="return false">點(diǎn)擊鼠標(biāo)右鍵觸發(fā)事件</div>

<!--點(diǎn)擊鼠標(biāo)右鍵觸發(fā)事件：并阻止默認(rèn)右鍵菜單-->
<div @contextmenu.prevent="divEvent">點(diǎn)擊鼠標(biāo)右鍵觸發(fā)事件</div>

<!--點(diǎn)擊鼠標(biāo)滾輪觸發(fā)事件：并阻止默認(rèn)右鍵菜單-->
<div @click.middle="divEvent">點(diǎn)擊鼠標(biāo)滾輪</div>

14绝编、vue父子組件生命周期執(zhí)行順序
父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted

15僻澎、Vuex有哪些基本屬性?為什么 Vuex 的 mutation 中不能做異步操作?

有五種烤送，分別是 State蟆豫、 Getter、Mutation 、Action嘁字、 Module
1、state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
2终畅、getters => 從基本數(shù)據(jù)派生出來(lái)的數(shù)據(jù)
3渴肉、mutations => 提交更改數(shù)據(jù)的方法，同步
4谬运、actions => 像一個(gè)裝飾器隙赁，包裹mutations，使之可以異步梆暖。
5伞访、modules => 模塊化Vuex

1、Vuex中所有的狀態(tài)更新的唯一途徑都是mutation轰驳，異步操作通過(guò) Action 來(lái)提交 mutation實(shí)現(xiàn)厚掷，這樣可以方便地跟蹤每一個(gè)狀態(tài)的變化，
從而能夠?qū)崿F(xiàn)一些工具幫助更好地了解我們的應(yīng)用级解。
2冒黑、每個(gè)mutation執(zhí)行完成后都會(huì)對(duì)應(yīng)到一個(gè)新的狀態(tài)變更，這樣devtools就可以打個(gè)快照存下來(lái)勤哗，然后就可以實(shí)現(xiàn) time-travel 了抡爹。
如果mutation支持異步操作，就沒(méi)有辦法知道狀態(tài)是何時(shí)更新的芒划，無(wú)法很好的進(jìn)行狀態(tài)的追蹤冬竟，給調(diào)試帶來(lái)困難。

五民逼、微信小程序

微信小程序生命周期
onLoad()：頁(yè)面加載時(shí)觸發(fā)泵殴。
onShow()：頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)。
onReady()：頁(yè)面初次渲染完成時(shí)觸發(fā)缴挖。
onHide()：頁(yè)面隱藏/切入后臺(tái)時(shí)觸發(fā)袋狞。
onUnload()：頁(yè)面卸載時(shí)觸發(fā)。