什么是Vuex？詳述Vuex的工作流程
官方介紹：Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
Vuex其實就是一個Vue的集中狀態(tài)管理工具，類似于redux，但使用方法很明顯優(yōu)化了許多
什么時候使用Vuex？
官方的話說，在你需要用的時候自然而然就知道自己什么時候要用了
在我看來，當(dāng)項目需要使用公共數(shù)據(jù)，并且這個公共數(shù)據(jù)的訪問量較大的時候，我們可以使用Vuex，用來集中管理公共的數(shù)據(jù)，而一些小型的項目，我們可以靠中央通信總線的發(fā)布訂閱模式來實現(xiàn)數(shù)據(jù)管理與通信
Vuex的工作流程
首先通過dispatch提交一個action
在action中我們可以執(zhí)行一些異步的操作，或者根據(jù)不同的情況分發(fā)不同的mutation
接著在action中調(diào)用commit，觸發(fā)一個mutation
所有修改state的操作，全部應(yīng)該放在mutation中來做
而state更新之后，會調(diào)用Vue的底層方法，通知視圖進(jìn)行更新渲染
Vuex不像redux，redux在任何項目工程內(nèi)都可以使用，不僅限于react，但是Vuex是基于Vue的底層實現(xiàn)的一個狀態(tài)管理工具，其實Vuex中的store本質(zhì)就是沒有template的隱藏著的vue組件
詳述Vuex的核心屬性及使用
state
state存儲了Vuex的基本數(shù)據(jù)，在state中存儲的數(shù)據(jù)都是經(jīng)過Vue底層watcher偵聽的數(shù)據(jù)，可以實現(xiàn)響應(yīng)式數(shù)據(jù)
actions
actions存放了Vuex中所有的異步操作，可以在actions中通過commit分發(fā)不同的mutation，在不同的情況下執(zhí)行不同的方法
mutations
mutations存放了Vuex中所有關(guān)于state的操作，修改state只能通過mutations，否則的話數(shù)據(jù)不會響應(yīng)式更新
getters
getters就類似與Vue實例中的computed，計算屬性，所有關(guān)于數(shù)據(jù)的復(fù)雜計算應(yīng)該放在getters中來操作
modules
modules，類似于redux中的reducer，每一個module都擁有自己的state、mutations、actions、getters；將整個store根據(jù)功能或者數(shù)據(jù)分解成不同的模塊，最后合并在一個Store中
Vuex的使用
importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex);// 這里我就不貼出對應(yīng)模塊的代碼了exportdefaultnewVuex.Store({modules: {? ? ? ? shopCart,// 購物車模塊user// 用戶模塊}})// 使用模塊import{mapState,mapActions,mapMutations,mapGetters}from'vuex';// Vue實例exportdefault{computed: {? ? ? ? ...mapState(['user','shopCart']),// 拿到store中的user模塊和shopCart模塊...mapGetters(['total'])// 拿到getters計算屬性中的總價，不區(qū)分模塊},methods: {? ? ? ? ...mapActions(['getUserData']),// 拿到actions中的getUserData方法，不區(qū)分模塊...mapMutations(['addGoodsToShopCart'])// 拿到mutations中的addGoodsToShopCart方法}}
Vue和Jquery的區(qū)別
Jquery直接操作DOM，使用選擇器以及便捷的DOM操作方式來修改視圖以及數(shù)據(jù)
Vue不直接操作DOM，而是通過雙向數(shù)據(jù)綁定的方式，將DOM節(jié)點在Vue內(nèi)部轉(zhuǎn)化對象的形式，通過修改數(shù)據(jù)直接修改視圖
Jquery是一個前端類庫，只是提供了很多便捷操作DOM的方法，而Vue是一個框架，有一套完整的體系
Vue中的slot是什么？
在Vue中，我們一般使用UI界面來劃分組件，而每一個UI界面可以劃分很多個組件，不同的UI界面中難免會有相似之處，這種相似的地方，我們?nèi)绾瓮ㄟ^一種優(yōu)雅的方式來達(dá)到復(fù)用這個UI組件呢？就是使用slot插槽了
slot插槽，其實就是用來做內(nèi)容分發(fā)，使得可以最大程度的復(fù)用組件，達(dá)到每次使用同一個組件的時候可以根據(jù)情況創(chuàng)建不同的內(nèi)容的功能
匿名插槽
不具有name屬性的slot就是匿名插槽，也可以叫默認(rèn)插槽
由父組件提供樣式和內(nèi)容，子組件只負(fù)責(zé)顯示
匿名插槽/默認(rèn)插槽只可以使用一次
<slot>里邊寫的是默認(rèn)值</slot>
在子組件內(nèi)定義slot時，內(nèi)部可以定義默認(rèn)值，當(dāng)父組件有內(nèi)容分發(fā)的時候，顯示父組件的內(nèi)容，沒有的時候，顯示默認(rèn)內(nèi)容
具名插槽
有name屬性
在組件中可以使用N次（name值不同的情況下）
父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽
<template v-slot:插槽名稱><div>插槽內(nèi)容</div></template>
沒有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名模板
父組件提供樣式和內(nèi)容
<slot name="插槽名稱"></slot>
作用域插槽（帶數(shù)據(jù)的插槽）
父組件只提供樣式，子組件提供內(nèi)容
在slot上面綁定數(shù)據(jù)
子組件的值可以傳給父組件使用
父組件展示子組件數(shù)據(jù)有3種方式：flex顯示、列表顯示、直接顯示
使用v-slot必須使用template;之前使用的是slot-scope，但是這個屬性已經(jīng)在2.6.0廢棄了，現(xiàn)在使用v-slot指令來代替原有的slot-scope屬性
scope返回的值是slot標(biāo)簽上返回的所有屬性值，并且是一個對象的形式保存起來
// 子組件中// 父組件中{{item}}{{scope.message}}
SPA首屏加載慢，該如何解決？
抽取css文件
使用CDN資源
使用路由模塊化加載
按照頁面或者組件分塊懶加載
使用gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/p>
使用服務(wù)端渲染的方式
使用預(yù)渲染的方式
菜鳥一枚，多多關(guān)照，出現(xiàn)錯誤請大家及時告知， 謝謝！！！
