成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Aklman / 1628人閱讀

摘要：第一篇文章我會(huì)結(jié)合和的部分源碼，來說明注入生命周期的過程。說到源碼，其實(shí)沒有想象的那么難。但是源碼的調(diào)用樹會(huì)復(fù)雜很多。應(yīng)用的業(yè)務(wù)代碼逐漸復(fù)雜，事件事件總線等通信的方式的弊端就會(huì)愈發(fā)明顯。狀態(tài)管理是組件解耦的重要手段。

前言

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

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

說到源碼，其實(shí)沒有想象的那么難。也和我們平時(shí)寫業(yè)務(wù)代碼差不多，都是方法的調(diào)用。但是源碼的調(diào)用樹會(huì)復(fù)雜很多。

為何使用 Vuex

使用 Vue 我們就不可避免的會(huì)遇到組件間共享的數(shù)據(jù)或狀態(tài)。應(yīng)用的業(yè)務(wù)代碼逐漸復(fù)雜，props、事件、事件總線等通信的方式的弊端就會(huì)愈發(fā)明顯。這個(gè)時(shí)候我們就需要 Vuex 。Vuex 是一個(gè)專門為 Vue 設(shè)計(jì)的狀態(tài)管理工具。

狀態(tài)管理是 Vue 組件解耦的重要手段。

它借鑒了 Flux、redux 的基本思想，將狀態(tài)抽離到全局，形成一個(gè) Store。

Vuex 不限制你的代碼結(jié)構(gòu)，但需要遵守一些規(guī)則：

應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè) store 對(duì)象中 提交 mutation 是更改狀態(tài)的唯一方法，并且這個(gè)過程是同步的 異步邏輯都應(yīng)該封裝到 action 里面

Vuex 注入 Vue 生命周期的過程

我們?cè)诎惭b插件的時(shí)候，總會(huì)像下面一樣用 Vue.use() 來載入插件，可是 Vue.use() 做了什么呢？

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

Vue.use(Vuex);

Vue.use() 做了什么

安裝 Vue.js 插件。如果插件是一個(gè)對(duì)象，必須提供 install 方法。如果插件是一個(gè)函數(shù)，它會(huì)被作為 install 方法。install 方法調(diào)用時(shí)，會(huì)將 Vue 作為參數(shù)傳入。

以上是 官方文檔 的解釋。

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

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

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

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    /* 判斷過這個(gè)插件是否已經(jīng)安裝 */
    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
  };
}

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

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

插件的 install 方法

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

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

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

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

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

/* 將 vuexInit 混淆進(jìn) 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 方法混淆進(jìn) beforeCreate 鉤子中，也是因?yàn)檫@個(gè)操作，所以每一個(gè) vm 實(shí)例都會(huì)調(diào)用 vuexInit 方法。那么 vuexInit 又做了什么呢？

vuexInit()

我們?cè)谑褂?Vuex 的時(shí)候，需要將 store 傳入到 Vue 實(shí)例中去。

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

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

  function vuexInit () {
    const options = this.$options
    if (options.store) {
      /* 根節(jié)點(diǎn)存在 stroe 時(shí) */
      this.$store = typeof options.store === "function"
        ");


如果你想加群交流




熱門文章傳送門


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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/6647.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

  • 【前端詞典】分享 8 個(gè)有趣且實(shí)用的 API

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

    baiy 評(píng)論0 收藏0

  • 【前端詞典】分享 8 個(gè)有趣且實(shí)用的 API

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

    duan199226 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<