【前端词典】从源码解读 Vuex 注入 Vue 生命周期的过程

Aklman 发布于2019-05-21 16:00 / 1466人阅读

摘要：第一篇文章我会结合和的部分源码，来说明注入生命周期的过程。说到源码，其实没有想象的那么难。但是源码的调用树会复杂很多。应用的业务代码逐渐复杂，事件事件总线等通信的方式的弊端就会愈发明显。状态管理是组件解耦的重要手段。

前言

这篇文章是【前端词典】系列文章的第 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 到展现涉及哪些缓存环节(非常详细)

私有云 idc机房托管线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6647.html

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

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于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