1.什么是Vuex讨越？詳述Vuex的工作流程
答：
官方介紹：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)抚垄，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化齐遵。
1. Vuex其實(shí)就是一個(gè)Vue的集中狀態(tài)管理工具戒良，類似于redux体捏，但使用方法很明顯優(yōu)化了許多
2. 什么時(shí)候使用Vuex？
官方的話說蔬墩，在你需要用的時(shí)候自然而然就知道自己什么時(shí)候要用了
在我看來，當(dāng)項(xiàng)目需要使用公共數(shù)據(jù)耗拓，并且這個(gè)公共數(shù)據(jù)的訪問量較大的時(shí)候拇颅，我們可以使用Vuex，用來集中管理公共的數(shù)據(jù)乔询，而一些小型的項(xiàng)目樟插，我們可以靠中央通信總線的發(fā)布訂閱模式來實(shí)現(xiàn)數(shù)據(jù)管理與通信
3. Vuex的工作流程
首先通過dispatch提交一個(gè)action
在action中我們可以執(zhí)行一些異步的操作，或者根據(jù)不同的情況分發(fā)不同的mutation
接著在action中調(diào)用commit竿刁，觸發(fā)一個(gè)mutation
所有修改state的操作黄锤，全部應(yīng)該放在mutation中來做
而state更新之后，會(huì)調(diào)用Vue的底層方法食拜，通知視圖進(jìn)行更新渲染
4. Vuex不像redux鸵熟，redux在任何項(xiàng)目工程內(nèi)都可以使用，不僅限于react负甸，但是Vuex是基于Vue的底層實(shí)現(xiàn)的一個(gè)狀態(tài)管理工具流强，其實(shí)Vuex中的store本質(zhì)就是沒有template的隱藏著的vue組件
2.詳述Vuex的核心屬性及使用
答：state
state存儲(chǔ)了Vuex的基本數(shù)據(jù)，在state中存儲(chǔ)的數(shù)據(jù)都是經(jīng)過Vue底層watcher偵聽的數(shù)據(jù)呻待，可以實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)
actions
actions存放了Vuex中所有的異步操作打月，可以在actions中通過commit分發(fā)不同的mutation，在不同的情況下執(zhí)行不同的方法
mutations
mutations存放了Vuex中所有關(guān)于state的操作蚕捉，修改state只能通過mutations奏篙，否則的話數(shù)據(jù)不會(huì)響應(yīng)式更新
getters
getters就類似與Vue實(shí)例中的computed，計(jì)算屬性迫淹，所有關(guān)于數(shù)據(jù)的復(fù)雜計(jì)算應(yīng)該放在getters中來操作
modules
modules秘通，類似于redux中的reducer，每一個(gè)module都擁有自己的state敛熬、mutations充易、actions、getters荸型；將整個(gè)store根據(jù)功能或者數(shù)據(jù)分解成不同的模塊盹靴，最后合并在一個(gè)Store中
Vuex的使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 這里我就不貼出對(duì)應(yīng)模塊的代碼了
export default new Vuex.Store({
? ? modules: {
? ? ? ? shopCart, // 購物車模塊
? ? ? ? user // 用戶模塊
? ? }
})
// 使用模塊
import {mapState,mapActions,mapMutations,mapGetters} from 'vuex';
// Vue實(shí)例
export default {
? ? computed: {
? ? ? ? ...mapState(['user','shopCart']), // 拿到store中的user模塊和shopCart模塊
? ? ? ? ...mapGetters(['total']) // 拿到getters計(jì)算屬性中的總價(jià)炸茧，不區(qū)分模塊
? ? },
? ? methods: {
? ? ? ? ...mapActions(['getUserData']), // 拿到actions中的getUserData方法，不區(qū)分模塊
? ? ? ? ...mapMutations(['addGoodsToShopCart']) // 拿到mutations中的addGoodsToShopCart方法
? ? }
}
3.vue和jquery的區(qū)別
答：Jquery直接操作DOM稿静，使用選擇器以及便捷的DOM操作方式來修改視圖以及數(shù)據(jù)
Vue不直接操作DOM梭冠，而是通過雙向數(shù)據(jù)綁定的方式，將DOM節(jié)點(diǎn)在Vue內(nèi)部轉(zhuǎn)化對(duì)象的形式改备，通過修改數(shù)據(jù)直接修改視圖
Jquery是一個(gè)前端類庫控漠，只是提供了很多便捷操作DOM的方法，而Vue是一個(gè)框架悬钳，有一套完整的體系
4.vue中的slot是什么盐捷？
答：? 在Vue中，我們一般使用UI界面來劃分組件默勾，而每一個(gè)UI界面可以劃分很多個(gè)組件碉渡，不同的UI界面中難免會(huì)有相似之處，
這種相似的地方母剥，我們?nèi)绾瓮ㄟ^一種優(yōu)雅的方式來達(dá)到復(fù)用這個(gè)UI組件呢滞诺？就是使用slot插槽了
slot插槽，其實(shí)就是用來做內(nèi)容分發(fā)环疼，使得可以最大程度的復(fù)用組件习霹，達(dá)到每次使用同一個(gè)組件的時(shí)候可以根據(jù)情況創(chuàng)建不同的內(nèi)容的功能
匿名插槽
不具有name屬性的slot就是匿名插槽，也可以叫默認(rèn)插槽
由父組件提供樣式和內(nèi)容炫隶，子組件只負(fù)責(zé)顯示
匿名插槽/默認(rèn)插槽只可以使用一次
<slot>里邊寫的是默認(rèn)值</slot>
在子組件內(nèi)定義slot時(shí)淋叶，內(nèi)部可以定義默認(rèn)值，當(dāng)父組件有內(nèi)容分發(fā)的時(shí)候伪阶，顯示父組件的內(nèi)容爸吮，沒有的時(shí)候，顯示默認(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筹误，但是這個(gè)屬性已經(jīng)在2.6.0廢棄了桐早，現(xiàn)在使用v-slot指令來代替原有的slot-scope屬性
scope返回的值是slot標(biāo)簽上返回的所有屬性值，并且是一個(gè)對(duì)象的形式保存起來
// 子組件中
? <slot :data="data" :message="message"></slot>
// 父組件中
? ? <template? v-slot="scope">
? ? ? <div class="data-list">
? ? ? ? ? <span v-for="(item,index) in scope.data" :key="index">{{item}}</span>
? ? ? </div>
? ? ? <div class="data-message">
? ? ? ? ? {{scope.message}}
? ? ? </div>? ? ? ? ? ? ? ?
? </template>
·
5.SPA首屏加載慢厨剪，該如何解決哄酝？
答： ? 抽取css文件
????????使用CDN資源
????????使用路由模塊化加載
????????按照頁面或者組件分塊懶加載
????????使用gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/p>
? ? ? ? 使用服務(wù)端渲染的方式
????????使用預(yù)渲染的方式
