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