Vue面試題（二）

語言: CN / TW / HK
時間 2023-03-22 03:15:05

theme: qklhk-chocolate

六、 vue-router路由高頻考題

1. vue-router是什麼？

這裏的路由就是SPA（單頁應用）的路徑管理器，vue-router是Vue.js官方的路由插件，它和Vue是深度集成的，適合用於構建單頁面應用。Vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。

路由模塊的本質：就是建立起url和頁面之間的映射關係

至於我們為啥不能用a標籤，這是因為用Vue做的都是單頁應用（當你的項目準備打包時，運行npm run build時，就會生成dist文件夾，這裏面只有靜態資源和一個index.html頁面），所以你寫的標籤是不起作用的，你必須使用vue-router來進行管理

2. vue-router的實現原理

SPA：單一頁面應用程序，只有一個完整的頁面；它在加載頁面的時候，不會加載整個頁面，而是隻更新某個指定容器中的內容。

單頁面應用（SPA）的核心之一：更新視圖而不重新請求頁面；vue-router在實現單頁面前端路由時，提供了兩種方式：Hash模式和History模式，根據mode參數來決定採用哪一種方式。

2.1 Hash模式

vue-router默認hash模式--使用URL的hash來模擬一個完整的URL，於是當URL改變時，頁面不會重新加載。

hash（#）是URL的錨點，代表的是網頁中的一個位置，單單改變#後面的部分，瀏覽器只會滾動到相應的位置，不會重新加載網頁，也就是説 hash出現在URL中，但不會被包含在http請求中，對後端完全沒有影響，因此改變hash不會重新加載頁面；

同時每一次改變#後面的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用“後退”按鈕，就可以回到上一個位置；所以説 Hash模式通過錨點值的改變，根據不同的值，渲染指定DOM位置的不同數據。hash模式的原理是通過location.hash = "/hashpath"的方式修改瀏覽器的hash值，通過onhashchange 事件（監測hash值變化），可以在window上監聽這個事件

2.2 History模式

由於hash模式會在url中自帶#，如果不想要很醜的 hash，我們可以用路由的 history 模式，只需要在配置路由規則時，加入"mode: 'history'"

這種模式充分利用了html5 history interface 中新增的pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器記錄棧，在當前已有的 back、forward、go 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 URL ，但瀏覽器不會立即向後端發送請求。可以通過監聽popstate事件監聽history變化，也就是點擊瀏覽器的前進或者後退功能時觸發。

js //main.js文件中 const router = new VueRouter({ mode: 'history', routes: [...] }) 當你使用 history 模式時，URL 就像正常的 url，例如 yoursite.com/user/id，

不過這種模式要玩好，還需要後台配置支持。因為我們的應用是個單頁客户端應用，如果後台沒有正確的配置，當用户在瀏覽器直接訪問 oursite.com/user/id 就會返回 404 ，這就不好看了。 所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html頁面，這個頁面就是你 app 依賴的頁面。

js export const routes = [ {path: "/", name: "homeLink", component:Home} {path: "/register", name: "registerLink", component: Register}, {path: "/login", name: "loginLink", component: Login}, {path: "*", redirect: "/"}]

此處就設置如果URL輸入錯誤或者是URL 匹配不到任何靜態資源，就自動跳到到Home頁面

2.3使用路由模塊來實現頁面跳轉的方式

  • 直接修改地址欄
  • this.$router.push("路由地址")
  • < router-link :to="路由地址"> 樣式類似於a標籤

3. vue-router使用方式

  1. 下載 npm i vue-router -S
  2. 在main.js中引入 import VueRouter from 'vue-router'
  3. 安裝插件 Vue.use(VueRouter)
  4. 創建路由對象並配置路由規則 let router=new VueRouter({router: [{path:'/home',component:Home}]})
  5. 將其路由對象傳遞給路由實例，options中加入 router:router
  6. 在app.vue中留位置 <router-view></router-view>

4. vue-router參數傳遞

聲明式導航 <router-link :to="">和編程式的導航 router.push(...)都可以傳參，接下來介紹前者的傳參方式，同樣的規則也適用於編程式的導航

```js valueString

this.$router.push({name:xxx,params:{key:value}}) ```

params傳參(不顯示在路由)

路由必須配置name: js { path: '/child, name: 'Child', component: Child }

傳遞參數：通過name ```js

//父路由編程式傳參(一般通過事件觸發) this.$router.push({ name:'Child', params:{ id:123 } })

`` 使用$route.params.id`來進行接收

params傳參（顯示在路由）

在路由中如下配置：

js //接收參數的頁面路由 { path:'/params/:newsId/:newsTitle', component:Params }

傳遞參數： ```js //父路由編程式傳參(一般通過事件觸發) this.$router.push({ path:'/params/newsIdValue/newsTitleValue', })

```

使用 $route.params.newsId來進行接收

query傳參

```js router-link跳轉Query

this.$router.push({ name:'Query',query: { queryId: status }}) ```

對應路由配置：

js { path: '/query', name: 'Query', component: Query } 於是我們可以獲取參數：

this.$route.query.queryId

params和query兩種傳參方式的區別

  • 區別一：

    使用params傳參(路徑必須使用name指定)：

    js this.$router.push({ name:"detail", //params對應的是name,並且name不能加"/"，不能使用 params:{ name:'nameValue', code:10011 } }); 使用query傳參（路徑使用name或者path都可以）

    js this.$router.push({ name:"detail", (path:"/detial") query:{ name:'nameValue', code:10011 } });

  • 區別二：query更加類似於我們ajax中get傳參，params則類似於post，説的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯

  • 區別三：獲取值的方法不同
  • 區別四：query傳值頁面刷新數據還在，而params傳值不在路由顯示的會消失，在路由顯示的不會消失

5. vue-router配置子路由（二級路由）

在User中加入 標籤，給子模板提供插入位置

html <template> <div class="hello"> <h1>{{ msg }}</h1> <router-view></router-view> </div> </template>

之後將 Profile和Posts兩個組件的路由寫在 User的children中

js routes: [ { path: '/', name: 'User', component: User, children: [ //子路由的<router-view>User.vue中出現 {path: '/Profile', name: 'Profile', component: Profile}, {path: '/Posts', name: 'Posts', component: Posts} ] } ]

6. 單頁面多路由區域操作

在一個頁面裏我們有兩個以上<router-view>區域，我們通過配置路由的js文件，來操作這些區域的內容

  1. App.vue文件，在<router-view>下面新寫了兩行<router-view>標籤,並加入了些CSS樣式

html <template> <div id="app"> <img src="./assets/logo.png"> <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link> <router-link :to="{name:'H1'}"><h1>H2</h1></router-link> <router-view></router-view> <router-view name="left" style="float:left;width:50%;background- color:#ccc;height:300px;"/> <router-view name="right" style="float:right;width:50%;background- color:yellowgreen;height:300px;"/> </div> </template> 2. 需要在路由裏配置這三個區域，配置主要是在components字段裏進行

js export default new Router({ routes: [ { path: '/', name: 'HelloWorld', components: { default: HelloWorld, left:H1,//顯示H1組件內容'I am H1 page,Welcome to H1' right:H2//顯示H2組件內容'I am H2 page,Welcome to H2' } }, { path: '/h1', name: 'H1', components: { default: HelloWorld, left:H2,//顯示H2組件內容 right:H1//顯示H1組件內容 } } ] })

7. $router和$route的區別

$route 是“路由信息對象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數。

① $route.path 字符串，對應當前路由的路徑，總是解析為絕對路徑，如 "/order"。

② $route.params 一個 key/value 對象，包含了 動態片段 和 全匹配片段， 如果沒有路由參數，就是一個空對象。

③ $route.query 一個 key/value 對象，表示 URL 查詢參數。 例如，對於路徑 /foo?user=1，則有$route.query.user為 1 ， 如果沒有查詢參數，則是個空對象。

④ $route.hash 當前路由的 hash 值 (不帶 #) ，如果沒有 hash 值，則為空字符串。

⑤ $route.fullPath 完成解析後的 URL，包含查詢參數和 hash 的完整路徑。

⑥ $route.matched 數組，包含當前匹配的路徑中所包含的所有片段所對應的配置參數對象。

⑦ $route.name 當前路徑名字

$router 是“路由實例”對象，即使用 new VueRouter創建的實例，包括了路由的跳轉方法，鈎子函數等。

$router常見跳轉方法:

this.$router.go(-1)//跳轉到上一次瀏覽的頁面 this.$router.replace('/menu')//指定跳轉的地址 this.$router.replace({name:'menuLink'})//指定跳轉路由的名字下 this.$router.push('/menu')//通過push進行跳轉 this.$router.push({name:'menuLink'})//通過push進行跳轉路由的名字下 router.push和router.replace的區別：

  • 使用push方法的跳轉會向 history 棧添加一個新的記錄，當我們點擊瀏覽器的返回按鈕時可以看到之前的頁面。
  • 使用replace方法不會向 history 添加新記錄，而是替換掉當前的 history 記錄，即當replace跳轉到的網頁後，‘後退’按鈕不能查看之前的頁面。

8. 設置 404 頁面

用户會經常輸錯頁面，當用户輸錯頁面時，我們希望給他一個友好的提示頁面，這個頁面就是我們常説的 404 頁面。vue-router也為我們提供了這樣的機制。

  1. 設置我們的路由配置文件（/src/router/index.js）

js { path:'*', component:Error } 這裏的path:'*'就是輸入地址不匹配時，自動顯示出Error.vue的文件內容

  1. 在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。

```html

```

9. vue-router如何響應路由參數的變化

當使用路由參數時，例如從 /user/foo導航到 user/bar， 原來的組件實例會被複用，因為兩個路由都渲染同一個組件，比起銷燬在創建，複用則顯得非常有效。不過，這意味着組件的生命週期鈎子函數不會再被調用

舉個例子：比如動態路由articleDeail/:id,當從路由articleDeail/123跳轉到articleDeail/234的時候，兩個路由都渲染同一個組件

複用組件時，想對路由參數的變化作出響應的話， 可以watch (監測變化) $route 對象：

js const User = { template: '...', watch: { '$route' (to, from) { // 對路由變化作出響應... } } } 或者使用 2.2 中引入的 beforeRouteUpdate 守衞：

js const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }

10.完整的vue-router導航解析流程

  1. 導航被觸發
  2. 在失活的組件裏調用離開守衞
  3. 調用全局的 beforeEach 守衞
  4. 在重用的組件裏調用 beforeRouteUpdate 守衞 (2.2+)
  5. 在路由配置裏調用 beforeEnter
  6. 解析異步路由組件
  7. 在被激活的組件裏調用 beforeRouteEnter
  8. 調用全局的 beforeResole 守衞 (2.5+)
  9. 導航被確認
  10. 調用全局的 afterEach 鈎子
  11. 觸發 DOM 更新
  12. 用創建好的實例調用 beforeRouteEnter 守衞中傳給 next 的回調函數

導航守衞

導航：表示路由正在發生改變

每個守衞方法接收三個參數：

  • to: Route: 即將要進入的目標 路由對象
  • from: Route: 當前導航正要離開的路由
  • next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。
    • next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是conrmed (確認的)。
    • next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用户手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from 路由對應的地址。
    • next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或router.push 中的選項。
    • next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。

確保要調用 next 方法，否則鈎子就不會被 resolved。

記住參數或查詢的改變並不會觸發進入/離開的導航守衞。你可以通過觀察 $route 對象來應對這些變化，或使用 beforeRouteUpdate 的組件內守衞。

  1. 全局前置導航（ router.beforeEach ）

當一個導航觸發時，全局前置守衞按照創建順序調用。守衞是異步解析執行，此時導航在所有守衞resolve之前一直處於等待中。

  1. 全局解析守衞（ router.beforeResolve ）

在導航被確認之前，同時在所有組件內守衞和一步路由組件被解析之後，解析守衞就被調用

  1. 全局後置鈎子（ beforeEnter ）

這些鈎子不會接受next函數也不會改變導航本身

  1. 路由獨享的守衞 （ beforeEnter ）

直接在路由配置上直接定義，這些與全局前值守衞的方法參數一樣

5.組件內的守衞（ beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave ）

13.vue-router的動態路由匹配以及使用

動態路徑匹配：即把某種模式匹配到的所有路由，全都映射到同個組件。使用動態路由參數來實現。

例如，我們有一個 User 組件，對於所有ID 各不相同的用户，都要使用這個組件來渲染。那麼，我們可以在vue-router的路由路徑中使用“動態路徑參數”(dynamic segment)來達到這個效果。

舉例：A頁面中是一個用户列表，點擊每一個用户都會進入用户詳情頁B，每個用户的詳情都是在B頁面展示的，這時就會用到路由匹配，即可以在路由位置寫 path:'/user/:id'，這樣就可以通過不同的id獲取不同的用户信息在同一個B頁面顯示了。

14.vue-router實現路由懶加載（動態加載路由）

當打包構建應用時，JavaScript包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就更高效了。

結合Vue的異步組件和 webpack的代碼分割功能，輕鬆實現路由組件的懶加載

首先，可以將異步組件定義為返回一個Promise的工廠函數（該函數返回的Promise應該resolve組件本身）

js const Foo = () => Promise.resolve({ /* 組件定義對象 */ }) 第二，在webpack中，可以使用動態import語法來定義代碼分快點（split point）

注意: 如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。

結合這兩者，這就是如何定義一個能夠被 Webpack 自動代碼分割的異步組件。

js const Foo = () => import('./Foo.vue') 在路由配置中什麼都不需要改變，只需要像往常一樣使用 Foo：

```js const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

import Vue from 'vue' import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({ routes: [ { path: '/', name: 'Navigator', component: () => import(/ webpackChunkName: "navigator" / './../components/Navigator') }, { path: '/tucao', name: 'Tucao', component: () => import(/ webpackChunkName: "tucao" / './../components/Tucao') } ] }) ``` 以上是按照官方文檔寫的懶加載代碼，但是發現chunk命名並沒生效 ，再去仔細看看官方文檔説明

“結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載”

其實還差一個webpack配置，就是webpack output需要加個chunkFilename

js chunkFilename: '[name].js'

七、vuex狀態管理高頻試題

1.前言

當我們的應用遇到多個組件共享狀態時，會需要多個組件依賴於同一狀態亦或是來自不同視圖的行為需要變更同一狀態。以前的解決辦法： - 將數據以及操作數據的行為都定義在父組件 - 將數據以及操作數據的行為傳遞給需要的各個子組件（有可能需要多級傳遞）

傳參的方法對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能為力。在搭建下面頁面時，你可能會對 vue 組件之間的通信感到崩潰 ，特別是非父子組件之間通信。此時就應該使用vuex，輕鬆可以搞定組件間通信問題。

vuex通信麻煩.png

2.什麼是Vuex

Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。這裏的關鍵在於集中式存儲管理。

簡單來説，vue應用中多個組件的共享狀態進行集中式的管理（讀/寫）

3. Vuex的原理是什麼

3.1 簡要介紹vuex原理

vuex實現了一個單向數據流，在全局有一個State存放數據，當組件要更改State中的數據時，必須通過Mutation進行，Mutation同時提供了訂閲者模式供外部插件調用獲取State數據的更新。而當所有（常見於調用後端接口異步獲取更新數據）異步或批量的同步操作需要走Action，但Action也是無法直接修 改State的，還是需要通過Mutation來修改State的數據。最後，根據State的變化，渲染到視圖上。

vuex原理.png

3.2 簡要介紹各模塊在流程中的功能

Vue Components：Vue組件。HTML頁面上，負責接收用户操作等交互行為，執行dispatch方法觸發，對應action進行迴應。

dispatch：操作行為觸發方法，是唯一能執行action的方法。

actions：操作行為處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發。然後由commit()來觸發mutation的調用 , 間接更新 state。負責處理Vue Components接收到的所有交互行為。包含同步/異步操作，支持多個同名方法，按照註冊的順序依次觸發。向後台API請求的操作就在這個模塊中進行，包括觸發其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈式觸發。

commit：狀態改變提交操作方法。對mutation進行提交，是唯一能執行mutation的方法。

mutations：狀態改變操作方法，由actions中的commit('mutation 名稱')來觸發。是Vuex修改state的唯一推薦方法。該方法只能進行同步操作，且方法名只能全局唯一。操作之中會有一些hook暴露出來，以進行state的監控等。

state：頁面狀態管理容器對象。集中存儲Vue components中data對象的零散數據，全局唯一，以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取，利用Vue的細粒度數據響應機制來進行高效的狀態更新。

getters：state對象讀取方法。圖中沒有單獨列出該模塊，應該被包含在了render中，Vue Components通過該方法讀取全局state對象。

3.3.Vuex與localStorage

vuex 是 vue 的狀態管理器，存儲的數據是響應式的。但是並不會保存起來，刷新之後就回到了初始狀態。

具體做法應該在vuex裏數據改變的時候把數據拷貝一份保存到localStorage裏面，刷新之後，如果localStorage裏有保存的數據，取出來再替換store裏的state。

```js let defaultCity = "上海" try { // 用户關閉了本地存儲功能，此時在外層加個try...catch if (!defaultCity){ defaultCity =JSON.parse(window.localStorage.getItem('defaultCity')) } }catch(e){}

export default new Vuex.Store({ state: { city: defaultCity }, mutations: { changeCity(state, city) { state.city = city try { window.localStorage.setItem('defaultCity', JSON.stringify(state.city)); // 數據改變的時候把數據拷貝一份保存到localStorage裏面 } catch (e) {} } } }) ``` 這裏需要注意的是：由於vuex裏，我們保存的狀態，都是數組，而localStorage只支持字符串，所以需要用JSON轉換：

js JSON.stringify(state.subscribeList); // array -> string JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array

4. 什麼時候使用Vuex

雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。 如果您的應用夠簡單，您最好不要使用 Vuex,因為使用 Vuex 可能是繁瑣宂餘的。一個簡單的global event bus 就足夠您所需了。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。

5. 如何使用Vuex

  1. 創建一個store.js文件 ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

const store = new Vuex.Store({ state: { count: 0 }, mutations: {// 包含了多個直接更新state函數的對象 INCREMENT(state) { state.count = state.count + 1; }, DECREMENT(state) { state.count = state.count - 1; } }, getters: { // 當讀取屬性值時自動調用並返回屬性值 evenOrOdd(state) { return state.count % 2 === 0? "偶數" : "奇數"; } }, actions: { // 包含了多個對應事件回調函數的對象 incrementIfOdd({ commit, state }) { // 帶條件的action if (state.count % 2 === 1) { commit('INCREMENT') } }, incrementAsync({ commit }) { //異步的action setInterval(() => { commit('INCREMENT') }, 2000); }

}

}) export default store //用export default 封裝代碼，讓外部可以引用

2. 在main.js中引入store.js文件js import store from './store' new Vue({ el: '#app', router, store,//註冊上vuex的store: 所有組件對象都多一個屬性$store components: { App }, template: '' })

3. 創建一個模板js

``` 由於 store 中的狀態是響應式的，當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地得到高效更新。在組件中調用 store 中的狀態簡單到僅需要在計算屬性中返回即可。改變store 中的狀態的唯一途徑就是顯式地提交 (commit) mutations。

如何通mapState等輔助函數優化上面代碼？

js import { mapActions, mapGetters, mapState, mapMutations } from "vuex"; ... computed: { ...mapState(["count"]), ...mapGetters(["evenOrOdd"]) } methods: { ...mapActions(["incrementIfOdd", "incrementAsync"]), ...mapMutations(["increment", "decrement"]) } 有點必須要注意：HelloWorld.vue文件中increment函數名稱要跟store.js文件mutations中一致，才可以寫成 ...mapMutations(["increment", "decrement"])，同樣的道理，incrementIfOdd和incrementAsync也要和store.js文件actions保持一致。

注意點：

  1. 如何理解getters

getters表面是獲得的意思，可以把它看做在獲取數據之前進行的一種再編輯，相當於對數據的一個過濾加工。getters就像計算屬性一樣，getter的返回值會根據他們的依賴被緩存起來，且只有當它的以來只發生了變化才會被重新計算。

  1. actions和mutations的區別

actions和上面的Mutations功能基本一樣，不同點是，actions是異步的改變state狀態，而Mutations是同步改變狀態。

6. Vuex和單純的全局對象有以下兩點不同（重點）

  1. Vuex的狀態存儲是響應式的。當Vue組件從store中讀取狀態的時候，那麼相應的組件也會相應的得到高效更新。
  2. 你不能直接改變store中的狀態。改變store中的狀態的唯一途徑就是顯式地提交（commit）mutation。這樣使得我們可以方便的跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。

7.vuex在vue-cli中的應用

第一步：npm下載vuex資源包：

npm install vuex --save 第二步：在 src/main.js 中引入

```js import Vue from 'vue'

import Vuex from 'vuex' Vue.use(Vuex)

import store from './vuex/store' ``` 第三步：在 src 下 新建 vuex 文件夾

vuex下: * modelus //文件夾，存放不同模塊需要的共享狀態文件 * index.js * 等 *store.js *types.js 説明：

vuex文件夾下store.js：

```js import Vue from 'vue' import Vuex from 'vuex' //引入不同模塊需要的共享變量： import index from './modules/index'

//使用vuex Vue.use(Vuex)

//對外暴露 export default new Vuex.Store({ modules: { index } }) ``` vuex文件夾下 modelus文件夾下 index.js:

```js

//引入一個常量，保證 action 和 mutations 的統一。 import * as types from '../types' /* * App通用配置 / const state = { //vuex初始化值 count: 0 } const actions = { increment({ commit }, n) { commit(types.TEST_INCREMENT, n) }, decrement({ commit }, state) {

    commit(types.TEST_DEREMENT, state)
}

} const getters = { count: state => state.count } const mutations = { types.TEST_INCREMENT { console.log(n); state.count = state.count + 5 + n }, types.TEST_DEREMENT { state.count = state.count - 3 } } export default { state, actions, getters, mutations } ``` vuex文件夾下type.js:

js //暴露常量 export const TEST_INCREMENT='TEST_INCREMENT' export const TEST_DEREMENT='TEST_DEREMENT'

八、vue如何優化首屏加載速度？

問題描述：

在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該 文件之後才能開始顯示首屏。若是引入的庫眾多，那麼vendor.js文件體積將會相當的大，影響首 屏的體驗。

解決方法是：

將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器 可以使用多個線程異步將vendor.js、外部的js等加載下來，達到加速首開的目的。外部的庫文件， 可以使用CDN資源，或者別的服務器資源等。

幾種常用的優化方法：

  1. 使用npm run build --report命令進行大文件定位
  2. 路由的按需加載

  3. 將打包生成後 index.html頁面 裏面的JS文件引入方式放在 body 的最後

  4. 用文檔的cdn文件代替 npm 安裝包

  5. UI庫的按需加載
  6. 開啟 Gzip 壓縮

詳解：

1 、大文件定位：

我們可以使用 webpack可視化插件Webpack Bundle Analyzer查看工程js文件大小，然後有目的的 解決過大的js文件。 使用命令：

npm run build --report

2 、路由的按需加載

3 、將JS文件引入方式放在 body 的最後 ：

默認情況下，build 後的 index.html 中，js 的引入是在 head 中，使用html-webpack-plugin插 件，將inject的值改為body。就可以將 js 引入放到 body 最後。

首先下載插件：（一般vue-cli項目裏默認有，可以package.json裏面檢查是否含有）

npm install html-webpack-plugin@2 --save-dev 在 build文件夾下webpack.base.conf.js配置：

js var htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/script/main.js', output: { filename: 'js/bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new htmlWebpackPlugin({ inject: 'body' }) ] } 即在 plugins 裏面加上 htmlWebpackPlugin 插件。

4 、用文檔的cdn文件代替 npm 安裝包：

用文檔的cdn文件代替，而不用打包到vender裏面去。具體的做法是：

1 、在index.html裏面引入依賴庫js文件

``` // index.html

``` 2 、在mian.js裏面去掉第三方js的import,因為在第一步已經通過script標籤引用進來了。

3 、把第三方庫的js文件從打包文件裏去掉

即在 build/webpack.base.conf.js文件的module裏面與rules同層加入externals：

5 、UI庫的按需加載：

一般 UI庫 都提供按需加載的方法，按照文檔即可配置。

6.、開啟 Gzip 壓縮

在 cong/index.js 設置 productionGzip 為 true，開啟 Gzip 壓縮

「」
「」