vuex
vuex是vue的狀態(tài)管理模式沉御。采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
狀態(tài)管理模式包含state痘括，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源； view ?以聲明的方式將state映射到視圖滔吠； actions纲菌，響應(yīng)在view上的用戶(hù)輸入導(dǎo)致的狀態(tài)變化。
核心是store疮绷，vuex的存儲(chǔ)狀態(tài)時(shí)響應(yīng)式的翰舌。所有從store實(shí)例中獲取狀態(tài)最簡(jiǎn)單的方式就是在計(jì)算屬性中返回某個(gè)狀態(tài)
state用來(lái)數(shù)據(jù)共享數(shù)據(jù)存儲(chǔ)
mutation用來(lái)改變數(shù)據(jù)狀態(tài)，只能包含同步的代碼, 不能寫(xiě)異步代碼
getters用來(lái)對(duì)共享數(shù)據(jù)進(jìn)行處理
action解決異步改變共享數(shù)據(jù)
store
mapState輔助函數(shù) ?
對(duì)象展開(kāi)運(yùn)算符
computed: {
??localComputed () { /* ... */ },
//使用對(duì)象展開(kāi)運(yùn)算符將此對(duì)象混入到外部對(duì)象中
??...mapState({
????// ...
??})
}
getter
有時(shí)候我們需要從store中的state派生出新的狀態(tài)
getter的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái)冬骚，只有當(dāng)它的依賴(lài)值發(fā)生了變化才會(huì)被重新計(jì)算
getter接受state作為第一個(gè)參數(shù)灶芝，getter可以作為第二個(gè)參數(shù)
mapGetters輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性
Mutation（映射在method）
改變state的唯一方法就是提交mutation郑原，每個(gè)mutation都有一個(gè)字符串的事件類(lèi)型和一個(gè)回調(diào)函數(shù)
你可以向store.commit傳入額外的參數(shù)，即 mutation 的 載荷（payload）
Mutation需遵守 Vue 的響應(yīng)規(guī)則
既然Vuex的 store 中的狀態(tài)是響應(yīng)式的夜涕，那么當(dāng)我們變更狀態(tài)時(shí)犯犁，監(jiān)視狀態(tài)的 Vue 組件也會(huì)自動(dòng)更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項(xiàng)：
最好提前在你的store中初始化好所有所需屬性女器。
當(dāng)需要在對(duì)象上添加新屬性時(shí)酸役，你應(yīng)該
使用Vue.set(obj, 'newProp', 123),或者
以新對(duì)象替換老對(duì)象。例如驾胆，利用對(duì)象展開(kāi)運(yùn)算符我們可以這樣寫(xiě)：
state.obj = { ...state.obj, newProp: 123 }
Action
Action函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象涣澡，但是context 對(duì)象不是 store 實(shí)例本身了，
actions: {
??increment ({ commit }) {
????commit('increment')
??}
}
Action通過(guò) store.dispatch 方法觸發(fā)
store.dispatch可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise丧诺，并且 store.dispatch 仍舊返回 Promise
Module
將store分割成模塊入桂，每個(gè)模塊擁有自己的 state、mutation驳阎、action抗愁、getter。
對(duì)于模塊內(nèi)部的mutation和 getter呵晚，接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對(duì)象蜘腌。
對(duì)于模塊內(nèi)部的action，局部狀態(tài)通過(guò) context.state 暴露出來(lái)饵隙，根節(jié)點(diǎn)狀態(tài)則為 context.rootState
?
從輸入U(xiǎn)RL到頁(yè)面展示撮珠，這中間發(fā)生了什么？
?
這個(gè)過(guò)程可以大致描述為如下：
1金矛、URI 解析
2芯急、DNS 解析（DNS 服務(wù)器）
3、TCP 三次握手（建立客戶(hù)端和服務(wù)器端的連接通道）
4驶俊、發(fā)送 HTTP 請(qǐng)求
5志于、服務(wù)器處理和響應(yīng)
6、TCP 四次揮手（關(guān)閉客戶(hù)端和服務(wù)器端的連接）
7废睦、瀏覽器解析和渲染
8伺绽、頁(yè)面加載完成
https://juejin.im/post/5f0415fff265da22bb7b232d
Map對(duì)象
https://juejin.im/post/5f03408d5188252e397ed503
不同
鍵名類(lèi)型
JavaScript?「Object」只接收兩種類(lèi)型的鍵名String?和?Symbol，你可以使用其他類(lèi)型的鍵名嗜湃，但是最終JavaScript 都會(huì)隱式轉(zhuǎn)換為字符串
原型Prototype
「Object」不同于「Map」奈应，它不僅僅是表面所看到的。「Map」只包含你所定義的鍵值對(duì)购披，但是「Object」對(duì)象具有其原型中的一些內(nèi)置屬性
迭代器
「Map」?是可迭代的杖挣，可以直接進(jìn)行迭代，例如forEach循環(huán)或者for...of...循環(huán)
但是對(duì)于「Object」是不能直接迭代的刚陡，當(dāng)你嘗試迭代將導(dǎo)致報(bào)錯(cuò)
元素順序和長(zhǎng)度
「Map」可以直接通過(guò)size獲取惩妇，「Object」需要運(yùn)用方法來(lái)實(shí)現(xiàn)株汉。
「Map」始終保持按插入順序返回鍵名。但「Object」卻不是歌殃。從ES6 開(kāi)始乔妈，String和Symbol鍵是按順序保存起來(lái)的，但是通過(guò)隱式轉(zhuǎn)換保存成String的鍵就是亂序的
Object/Map 應(yīng)用場(chǎng)景
如上就是「Map」和「Object」的基本區(qū)別氓皱，在解決問(wèn)題考慮兩者的時(shí)候就需要考慮兩者的區(qū)別路召。
[if !supportLists]o?[endif]當(dāng)插入順序是你解決問(wèn)題時(shí)需要考慮的，并且當(dāng)前需要使用除String和Symbol以外的鍵名時(shí)波材，那么「Map」就是個(gè)最佳解決方案
[if !supportLists]o?[endif]如果需要遍歷鍵值對(duì)（并且需要考慮順序）,那我覺(jué)得還是需要優(yōu)先考慮「Map」股淡。
[if !supportLists]o?[endif]「Map」是一個(gè)純哈希結(jié)構(gòu)，而「Object」不是（它擁有自己的內(nèi)部邏輯）廷区。Map在頻繁增刪鍵值對(duì)的場(chǎng)景下表現(xiàn)更好唯灵，性能更高。因此當(dāng)你需要頻繁操作數(shù)據(jù)的時(shí)候也可以?xún)?yōu)先考慮Map
[if !supportLists]o?[endif]再舉一個(gè)實(shí)際的例子隙轻，比如有一個(gè)自定義字段的用戶(hù)操作功能埠帕，用戶(hù)可以通過(guò)表單自定義字段，那么這時(shí)候最好是使用Map大脉，因?yàn)楹苡锌赡軙?huì)破壞原有的對(duì)象
「Object」對(duì)象通掣慵啵可以很好的保存結(jié)構(gòu)化數(shù)據(jù)水孩，但是也有相應(yīng)的局限性：
[if !supportLists]1.?[endif]鍵名接受類(lèi)型只能用String或者Symbol
[if !supportLists]2.?[endif]自定義的鍵名容易與原型繼承的屬性鍵名沖突（例如toString镰矿，constructor等）
[if !supportLists]3.?[endif]對(duì)象/正則無(wú)法用作鍵名 而這些問(wèn)題通過(guò)「Map」都可以解決，并且提供了諸如迭代器和易于進(jìn)行大小查找之類(lèi)的好處
不要將「Map」作為普通「Object」的替代品俘种，而應(yīng)該是普通對(duì)象的補(bǔ)充
塊狀作用域
JS的作用域有：全局作用域秤标、函數(shù)作用域，es6新增了塊級(jí)作用域宙刘。
塊級(jí)作用域由{}包括苍姜。If和for語(yǔ)句里面的{}也屬于塊狀作用域
ES6沒(méi)有塊級(jí)作用域的情況會(huì)出現(xiàn)的問(wèn)題：
[if !supportLists]1、[endif]在if和for循環(huán)中聲明的變量會(huì)泄露成全局變量
[if !supportLists]2悬包、[endif]內(nèi)部變量存在變量提升會(huì)覆蓋外部變量
https://www.cnblogs.com/moumoon/p/10985250.html
普通函數(shù)與箭頭函數(shù)的區(qū)別
普通函數(shù)中的this總是指向調(diào)用它的那個(gè)對(duì)象衙猪；箭頭函數(shù)沒(méi)有自己的this，它的this永遠(yuǎn)指向其定義環(huán)境布近，任何方法都改變不了其this執(zhí)行
箭頭函數(shù)不能當(dāng)作構(gòu)造函數(shù)垫释，不能使用new命令。
箭頭函數(shù)不能使用yield命令撑瞧，因此箭頭函數(shù)不能用作genertor函數(shù)棵譬。
箭頭函數(shù)沒(méi)有原型屬性。
箭頭函數(shù)不能使用argumen對(duì)象预伺，可以使用...rest函數(shù)代替
變量提升：由于js的內(nèi)存機(jī)制订咸，function的級(jí)別最高曼尊，而用箭頭函數(shù)定義函數(shù)的時(shí)候，需要var（let脏嚷、const）關(guān)鍵字骆撇，而用var所定義的變量不能得到變量提升。箭頭函數(shù)一定要定義于調(diào)用之前然眼。
防抖節(jié)流
防抖
觸發(fā)事件后n秒后才執(zhí)行函數(shù)艾船，如果在n秒內(nèi)觸發(fā)了函數(shù)，將重新計(jì)算執(zhí)行時(shí)間
防抖分為立即執(zhí)行版和非立即執(zhí)行版高每。
非立即執(zhí)行版的意思是觸發(fā)事件后函數(shù)不會(huì)立即執(zhí)行屿岂，而是在n 秒后執(zhí)行，如果在 n 秒內(nèi)又觸發(fā)了事件鲸匿，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間爷怀。
立即執(zhí)行版的意思是觸發(fā)事件后函數(shù)會(huì)立即執(zhí)行，然后n 秒內(nèi)不觸發(fā)事件才能繼續(xù)執(zhí)行函數(shù)的效果带欢。
節(jié)流
就是之連續(xù)觸發(fā)事件但是在n秒中只執(zhí)行一次
對(duì)于節(jié)流运授，一般有兩種方式可以實(shí)現(xiàn)，分別是時(shí)間戳版和定時(shí)器版
https://juejin.im/post/5b651dc15188251aa30c8669
場(chǎng)景
https://www.codercto.com/a/25782.html
對(duì)this乔煞、call吁朦、apply和bind的理解
[if !supportLists]1、[endif]在瀏覽器里渡贾，在全局范圍內(nèi)this指向window對(duì)象逗宜；
[if !supportLists]2、[endif]在函數(shù)中空骚，this永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象纺讲；
[if !supportLists]3、[endif]構(gòu)造函數(shù)中囤屹，this指向new出來(lái)的那個(gè)新的對(duì)象熬甚；
[if !supportLists]4、[endif]Call肋坚、apply乡括、bind中的this被強(qiáng)綁定在指定的那個(gè)對(duì)象上；
[if !supportLists]5智厌、[endif]箭頭函數(shù)中的this比較特殊诲泌，箭頭函數(shù)this為父作用域的this，不是調(diào)用時(shí)的this峦剔，箭頭函數(shù)的this指向是靜態(tài)的档礁，聲明的時(shí)候就確定下來(lái)了。
原型吝沫、原型鏈
我們創(chuàng)建的每一個(gè)函數(shù)都有一個(gè)prototype屬性呻澜，這個(gè)屬性就是一個(gè)指針递礼，指向一個(gè)對(duì)象。這個(gè)對(duì)象包含由特定類(lèi)型的所有實(shí)例共享的屬性和方法羹幸，簡(jiǎn)單來(lái)說(shuō)脊髓，該函數(shù)實(shí)例化的所有對(duì)象的_proto_的屬性指向這個(gè)對(duì)象，它是該函數(shù)所有實(shí)例化對(duì)象的原型栅受。
Constructor 屬性
當(dāng)函數(shù)創(chuàng)建的時(shí)候将硝，prototype屬性指向一個(gè)原型對(duì)象時(shí)，在默認(rèn)情況下屏镊，這個(gè)原型對(duì)象將會(huì)獲得一個(gè)constructor屬性依疼，這個(gè)屬性是一個(gè)指針，指向prototype所在的函數(shù)對(duì)象而芥。
isPrototypeOf() 方法用于測(cè)試一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈上律罢。
原型鏈主要實(shí)現(xiàn)方法是讓構(gòu)造函數(shù)的prototype對(duì)象等于另一個(gè)類(lèi)型的實(shí)例，此時(shí)的prototype對(duì)象因?yàn)槭菍?shí)例棍丐，因此將包含一個(gè)指向另一個(gè)原型的指針误辑，響應(yīng)的另一個(gè)原型也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。例如另一個(gè)原型又是另一個(gè)類(lèi)型的實(shí)例歌逢，那么上述關(guān)系依然成立巾钉，如此層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條秘案，這就是原型鏈的基本概念砰苍。
獲取原型的方法：
P.proto ????p.constructor.prototype ?Object.getPrototypeOf(p)
?
閉包
閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域內(nèi)變量的函數(shù)
創(chuàng)建閉包最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，創(chuàng)建的函數(shù)可以訪問(wèn)到當(dāng)前函數(shù)的局部變量踏烙。
用途：
[if !supportLists]1师骗、[endif]閉包的用途是使我們?cè)诤瘮?shù)外部可以訪問(wèn)到函數(shù)內(nèi)部的變量历等。通過(guò)使用閉包讨惩，我們可以通過(guò)在外部調(diào)用閉包函數(shù)，從而在外部訪問(wèn)到函數(shù)內(nèi)部的變量寒屯，可以用來(lái)創(chuàng)建私有變量荐捻。
[if !supportLists]2、[endif]函數(shù)的另一個(gè)用途可以讓已經(jīng)運(yùn)行結(jié)束的函數(shù)上下文中的變量對(duì)象繼續(xù)留著內(nèi)存中寡夹，因?yàn)殚]包函數(shù)保留了這個(gè)變量對(duì)象的引用处面，不會(huì)被回收
事件委托
利用了瀏覽器事件冒泡的機(jī)制。因?yàn)槭录诿芭葸^(guò)程中會(huì)上傳到父節(jié)點(diǎn)菩掏，并且父節(jié)點(diǎn)可以通過(guò)事件對(duì)象獲取到目標(biāo)節(jié)點(diǎn)魂角，因?yàn)榭梢园炎庸?jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)統(tǒng)一處理多個(gè)子元素的事件智绸，這種方式稱(chēng)為事件代理野揪。
事件傳播
三個(gè)階段：
[if !supportLists]1访忿、[endif]捕獲階段-事件從window開(kāi)始，然后從下到每個(gè)元素斯稳，直到到達(dá)目標(biāo)元素事件或者enent海铆。Target
[if !supportLists]2、[endif]目標(biāo)階段-事件已到達(dá)目標(biāo)元素
[if !supportLists]3挣惰、[endif]冒泡階段-事件從目標(biāo)元素冒泡卧斟，然后上升到每個(gè)元素，直到window憎茂。
事件捕獲
當(dāng)事件發(fā)生在dom元素上時(shí)珍语，該事件餅不完全發(fā)生在那個(gè)元素上。捕獲階段竖幔，事件從window開(kāi)始廊酣，一直到觸發(fā)事件的元素。Window-document-html-body-目標(biāo)元素赏枚。
事件冒泡
事件冒泡剛好與事件捕獲相反亡驰，當(dāng)前元素---->body ----> html---->document ---->window。當(dāng)事件發(fā)生在DOM元素上時(shí)饿幅，該事件并不完全發(fā)生在那個(gè)元素上凡辱。在冒泡階段，事件冒泡栗恩，或者事件發(fā)生在它的父代透乾，祖父母，祖父母的父代磕秤，直到到達(dá)window為止乳乌。
var、let和const區(qū)別市咆？
?
[if !supportLists]1汉操、[endif]Var聲明的變量會(huì)掛載在window上，會(huì)存在變量提升蒙兰；
[if !supportLists]2磷瘤、[endif]Let和const聲明形成塊作用域；
[if !supportLists]3搜变、[endif]同一個(gè)作用域下的let和const不能聲明不同名變量采缚，而var可以；
?
