【前端詞典】從源碼解讀 Vuex 注入 Vue 生命周期的過程

Aklman 發布于2019-05-21 16:00 / 1619人閱讀

摘要：第一篇文章我會結合和的部分源碼，來說明注入生命周期的過程。說到源碼，其實沒有想象的那么難。但是源碼的調用樹會復雜很多。應用的業務代碼逐漸復雜，事件事件總線等通信的方式的弊端就會愈發明顯。狀態管理是組件解耦的重要手段。

前言

這篇文章是【前端詞典】系列文章的第 13 篇文章，接下的 9 篇我會圍繞著 Vue 展開，希望這 9 篇文章可以使大家加深對 Vue 的了解。當然這些文章的前提是默認你對 Vue 有一定的基礎。如果一點基礎都沒有，建議先看官方文檔。

第一篇文章我會結合 Vue 和 Vuex 的部分源碼，來說明 Vuex 注入 Vue 生命周期的過程。

說到源碼，其實沒有想象的那么難。也和我們平時寫業務代碼差不多，都是方法的調用。但是源碼的調用樹會復雜很多。

為何使用 Vuex

使用 Vue 我們就不可避免的會遇到組件間共享的數據或狀態。應用的業務代碼逐漸復雜，props、事件、事件總線等通信的方式的弊端就會愈發明顯。這個時候我們就需要 Vuex 。Vuex 是一個專門為 Vue 設計的狀態管理工具。

狀態管理是 Vue 組件解耦的重要手段。

它借鑒了 Flux、redux 的基本思想，將狀態抽離到全局，形成一個 Store。

Vuex 不限制你的代碼結構，但需要遵守一些規則：

應用層級的狀態應該集中到單個 store 對象中提交 mutation 是更改狀態的唯一方法，并且這個過程是同步的異步邏輯都應該封裝到 action 里面

Vuex 注入 Vue 生命周期的過程

我們在安裝插件的時候，總會像下面一樣用 Vue.use() 來載入插件，可是 Vue.use() 做了什么呢？

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

Vue.use() 做了什么

安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install 方法調用時，會將 Vue 作為參數傳入。

以上是官方文檔的解釋。

接下來我們從源碼部分來看看 Vue.use() 都做了什么。

Vue 源碼在 initGlobalAPI 入口方法中調用了 initUse (Vue) 方法，這個方法定義了 Vue.use() 需要做的內容。

function initGlobalAPI (Vue) {
  ......
  initUse(Vue);
  initMixin$1(Vue); // 下面講 Vue.mixin 會提到
  ......
}

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    /* 判斷過這個插件是否已經安裝 */
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    var args = toArray(arguments, 1);
    args.unshift(this);
    /* 判斷插件是否有 install 方法 */
    if (typeof plugin.install === "function") {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === "function") {
      plugin.apply(null, args);
    }
    installedPlugins.push(plugin);
    return this
  };
}

這段代碼主要做了兩件事情：

一件是防止重復安裝相同的 plugin 另一件是初始化 plugin

插件的 install 方法

看完以上源碼，我們知道插件（Vuex）需要提供一個 install 方法。那么我們看看 Vuex 源碼中是否有這個方法。結果當然是有的：

/* 暴露給外部的 install 方法 */
function install (_Vue) {
  /* 避免重復安裝（Vue.use 內部也會檢測一次是否重復安裝同一個插件）*/
  if (Vue && _Vue === Vue) {
    {
      console.error(
        "[vuex] already installed. Vue.use(Vuex) should be called only once."
      );
    }
    return
  }
  Vue = _Vue;
  /* 將 vuexInit 混淆進 Vue 的 beforeCreate(Vue2.0) 或 _init 方法(Vue1.0) */
  applyMixin(Vue);
}

這段代碼主要做了兩件事情：

一件是防止 Vuex 被重復安裝另一件是執行 applyMixin，目的是執行 vuexInit 方法初始化 Vuex

接下來我們看看 applyMixin(Vue) 源碼：

/* 將 vuexInit 混淆進 Vue 的 beforeCreate */
function applyMixin (Vue) {
  var version = Number(Vue.version.split(".")[0]);
  if (version >= 2) {
    Vue.mixin({ beforeCreate: vuexInit });
  } else {
    /* Vue1.0 的處理邏輯，此處省略 */
    ......
  }
  function vuexInit () {
    ......
  }
}

從上面的源碼，可以看出 Vue.mixin 方法將 vuexInit 方法混淆進 beforeCreate 鉤子中，也是因為這個操作，所以每一個 vm 實例都會調用 vuexInit 方法。那么 vuexInit 又做了什么呢？

vuexInit()

我們在使用 Vuex 的時候，需要將 store 傳入到 Vue 實例中去。

new Vue({
  el: "#app",
  store
});

但是我們卻在每一個 vm 中都可以訪問該 store，這個就需要靠 vuexInit 了。

  function vuexInit () {
    const options = this.$options
    if (options.store) {
      /* 根節點存在 stroe 時 */
      this.$store = typeof options.store === "function"
        ");

如果你想加群交流

熱門文章傳送門

【前端詞典】滾動穿透問題的解決方案
【前端詞典】5 種滾動吸頂實現方式的比較（性能升級版）
【前端詞典】提高幸福感的 9 個 CSS 技巧
【前端詞典】分享 8 個有趣且實用的 API
【前端詞典】從輸入 URL 到展現涉及哪些緩存環節(非常詳細)

云服務器 GPU云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6647.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
【前端詞典】分享 8 個有趣且實用的 API

摘要：使用上面的截圖是微信網頁版的消息提示。代碼很簡單微信網頁版微信網頁版微信全屏定義這個可以使你所打開的頁面全屏展示，沒有其他頁面外的內容展示在屏幕上。如果你想加群交流，你也可以添加我的微信。前言在日常開發中總是和各種 API 打交道，我們名為前端工程師實為 API 調用工程師。這篇文章我就分享 8 個有趣的 API，你若通過閱讀這篇文章對前端增加一點點的樂趣，對我來說也是一種鼓勵。這幾...

baiy 2019-05-23 16:26 評論0 收藏0
【前端詞典】分享 8 個有趣且實用的 API

摘要：前言在日常開發中總是和各種打交道，我們名為前端工程師實為調用工程師。使用上面的截圖是微信網頁版的消息提示。代碼很簡單微信網頁版微信網頁版微信全屏定義這個可以使你所打開的頁面全屏展示，沒有其他頁面外的內容展示在屏幕上。前言在日常開發中總是和各種 API 打交道，我們名為前端工程師實為 API 調用工程師。這篇文章我就分享 8 個有趣的 API，你若通過閱讀這篇文章對前端增加一點點的樂...

duan199226 2019-08-02 15:22 評論0 收藏0