阅读 8139

源码篇(五):手写vuex版mini源码分析vuex的执行过程。附送简版vuex源码

适合人群

本文适合1.5~4年的开发经验vue前端开发人员。本文不做vuex基本使用的讲解,如没有接触过vue或vuex,建议学习后再看本文。

前言

关于全局缓存变量的储存,在传统时代,根据cookies,localstorage,session等,已经有了很友好的方案,基本已经可以完成变量的存储。但是在数据驱动的时代,他们却无法满足我们的需求。以vue为实例,所有的数据需要双向绑定才能完成数据驱动,但是明显cookies,localstorage,session等,他是无法完成双向绑定的,那就意味着,但数值变化时,我们的页面无法同步展示,因为我们压根监听不到他们。

那么解决方案是什么呢?每个单页都有自己的完善的状态处理器,例如vue的vuex,react的react-redux等。 我们先总结一下vue到底有共享数据的方式。

吐槽:本文之前巴拉巴拉写了上万字,放在草稿中。结果掘金系统更新,把草稿箱还原到了两天前,所以本文二次抒写比较粗糙。

vue的通信方式

vue的通信方式大概汇总方式,本文重点为vuex,这里简述一下其他通信方式的场景,以及优势与缺陷,方便突出vuex的优势。如已经有一定的认知,可跳过,直接看源码部分。

1)子父通信,父子通信

这个有三天vue工作经验相信都有用过,本章不做过多讲解。它的确十分方便,属于二八原则的二之中。

它的弊端就是,只能存在于具有父子的传递中,一旦组件层次多级,或者组件非父子关系,逻辑将变得十分复杂,且问题多层级问题不易定位。

弊端:

  • 只能限制父子关系
  • 不适合多层级关系,多层级写法麻烦,且问题不易定位

2)parent/children/ref

那么单层关系,非父子组件如何通信呢?如兄弟组件通信。ref跟parent也是一个不错的选择(当然日常中,直接用vuex更多)。

他就是拿到类似“dom对象”,再去调用具体的方法。这样的话,即可完成兄弟之间的通信。

这里也十分好理解,通过 $refs 找到子组件,调用子组件中的函数。parent与children一样,这里不再说明。

弊端:只适合简单组件关系的调用,一旦多级组件,即会使逻辑十分复杂。

// parent.vue
<template>
    <Child1 />
    <Child2 />
</template>

// child1.vue
click(){
    this.$parent.$emit('child1Click', 'child1 点击,发送消息,触发事件')
}

// child2.vue
mounted(){
   this.$parent.$on('child1Click', (msg) => {
       console.log(msg)
   })
复制代码

}

parent/children/ref弊端:

  • 可以是父子关系,也可以是兄弟关系,但只限于简单层面关系,难于用于多组件层级关系。

3)attrs/listeners

上述的vue通信,都是针对层级不深的组件关系。那么如果存在一个父控件,多层级子组件的数你据关系呢?你可能会想起props。但是props无关组件中的逻辑业务一种增多了,无关代码多了,后续代码维护也就变得困难了。

这时候attrs跟listeners是一个不错的选择。他的中间组件,可以不受影响,去传递给子孙组件。

举个栗子:新建一个“人”为主体的组件,先插入个人的“基本信息”的组件,“基本信息”下再嵌入“个人兴趣”的组件。这种情况,我们可能获取到一个“人”的详细信息,再分发到各个子组件。

// 组件person
Vue.component('Person', {
  template: `<div>
      <p>我的个人介绍:</p>
      <MyBasic :myName="myName" :myCharact="myCharact"  ></MyBasic>
    </div>`,
  data() {
    return {
      myName: 'weizhan',
      myCharact: 'A person who likes blogs' //传递给下下级组件的数据
    }
  }
});

// 组件MyBasic
Vue.component('MyBasic', {
  template: `
    <div>
      ${thisName}
      <MyCharactComp></MyCharactComp>
    </div>
  `,
  props: ['myName'],
  data(){
    return {
      thisName: this.myName
    }
  },
});

// 组件MyCharactComp
Vue.component('MyCharactComp', {
  template: `
    <div>
      ${$attrs.myCharact}
    </div>
  `,
  methods: {
  }
});
复制代码

由代码可以了解,我们只需要把所有的参数定义在父级中,这样我们的子集,只要没有通过props,剩下的即可拿到剩余参数。所以,在我们多层级的组件中,其数据需要定义同一个祖父中的,attrs/listeners是个不错的选择方式。

attrs/listeners的弊端:

  • 只针对同一祖父组件关系,非统一祖父无法使用
  • 数据前倾向于,只能给一个组件使用(因为props获取之后,剩下attr就再也拿不到了)
  • 数据传递模式类似props,属于非响应式。需要手动监听。

4)provide/inject

那如果同一祖父中,一个数据有多个子组件同时使用呢?这时候我们的provide/inject就登场了。事实上,provide/inject的应用场景偏冷门,如果不去系统的看vue的api,可能你还不知有这个东西。事实上,官方也不推荐这种写法。

写UI库还是插件库,相信比例不会超过vue开发者的1%;为方便对比vuex,利用官方给的提示,我们来写一个简单的组件(例如利用provide来注入整个from表单的字体大小):

// MyForm
  Vue.component('MyForm', {
    template: `<div>
        <FromItem >
          <MyButton></MyButton>
        </FromItem>
         <MyButton></MyButton>
      </div>`,
      provide:{
        myStyle: {font-size: '16px'} // 这里不接收动态传参,但是可以直接传this过去,从而实现动态响应式
      }
  });

  // 组件FromItem
  Vue.component('FromItem', {
    template: `
      <div>
        <solt/>
      </div>`,
     inject:['myStyle']
  });

  // 组件MyButton
  Vue.component('MyButton', {
    template: `
      <div>
        <button :style="style"></button>
      </div>`,
    inject:['myStyle']
  });
复制代码

注意到案例中有两个不同层级的MyButton,但是他们却都可以拿到myStyle的参数。这样的话,provide的优势就很明显了,只要在一个祖父下,无论什么层级,无论如何嵌套,他都能inject到provide的。且案例中,是不可响应的。当父级的myStyle改变,也不影响子元素。这就十分方便我们的组件库的初始化。

当然,我们组件库,也有切换整个表单字体大小的需求。那么很简单,把provide的值改成可响应即可。

provide/inject的弊端:

  • 只能存在与祖父关系中。
  • 祖父级定义好,无论下面的层级如何嵌套,都不会影响inject的注入。这意味着,provide的定义要非常的规范,而且需要统一。一旦有一个开发人员,没有理解“myStyle”的作用,将造成组件库的异常。这就是为什么有人说:万一有人用provide写了垃圾代码,就成一团垃圾了。

5)EventBus

以上四种情况,均属于祖父,或者简单组件关系。

如果即要求,层级复杂深入,且两个组件之间没有任何关系。他们如何通信呢?如果是是在小项目中,EventBus就是个不错的选择。

EventBus,是一种消息订阅与发布的设计模式,使用上也十分简单。他也不仅仅是前端的概念,Android,Java都有EventBus发布/订阅事件总线的概念。他的原理也相对简单,将事件发布者和订阅者分离,利用“反射”将事情触发。我们可以利用vue的emit跟on原理,来实现一个简版的EventBus(源码借鉴来源结尾标准)。

class EventBus{
    constructor(){
        this.event=Object.create(null);
    };
    //注册事件
    on(name,fn){
        if(!this.event[name]){
            //一个事件可能有多个监听者
            this.event[name]=[];
        };
        this.event[name].push(fn);
    };
    //触发事件
    emit(name,...args){
        //给回调函数传参
        this.event[name]&&this.event[name].forEach(fn => {
            fn(...args)
        });
    };
    //取消事件
    off(name,offcb){
        if(this.event[name]){
            let index=this.event[name].findIndex((fn)=>{
                return offcb===fn;
            })
            this.event[name].splice(index,1);
            if(!this.event[name].length){
                delete this.event[name];
            }
        }
    }
}
复制代码

从简版的EventBus,即是注册,反注册(取消),触发。他类似一个中间,不管你组件如何嵌套,只要连上同一个EventBus,即可完成通信。

EventBus的弊端:

  • 1.一个EventBus,可以理解成类,一个js文件。定义几个变量,的确没有问题。但是如果变量多的话,一个文件很难去调配好。 那如果多个EventBus,他们之间又没有关联关系,需要不断的引入。(再看看下边的vuex的modules就知道优势在哪了)
  • 2.EventBus本身性能不高,需要遍历所有的注册对象去轮询。
  • 3.注册即是一个监听,你不注销,永远都常驻在内存中。需及时的去处理注册与反注册。

6)vuex

本文的重点vuex。我们手写后再总结。

手写vuex

借鉴一下大神的图片vuex数据流程图。在实现之前,我们总结一下vuex到底是个什么东西?

1.内部用state存储数据,提供外部getters方法,暴露数据。

2.页面可以通过dispatch触发actions,commit触发mutations。其中actions不可改变数据源state,而mutations可以。

3.另外,我们的store可以支持多个modules模块。

下面我们来实现这个过程。

1)基本架子的搭建

我们搭一个普通的基于vuex的案例,项目结果如下:

首先新建项目:

  • npm install --global vue-cli
  • vue init webpack my-vuex
  • npm install
  • npm install vuex save

然后我们导入vuex.

新建vuex/store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import otherModel from './moduels/other-model'
import userModel from './moduels/user-model'

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        userModel,
        otherModel
    },
})
复制代码

新建vuex/moduels/other-model.js:

const state = {
    status: '欢迎小姑凉', //
}
const getters = {
    getStatus(state) {
        return state.status;
    }
}
const mutations = {
    changeStatus(state, status) {
        state.status = status;
    }
}
const actions = {
    changeStatusActions({
        commit
    }, value) { // 参数解构,拿到上下文
        setTimeout(() => {
            commit('changeStatus', value);
        }, 1000);
    }
}

export default {
    state, getters,mutations, actions
}
复制代码

新建vuex/moduels/user-model.js:

const state = {
    name: '前端小伙', //
    url: 'https://juejin.im/user/5e8fddc9e51d4546be39a558', //
}

const getters = {
    getName(state) {
        return state.name;
    },
    getUrl(state){
        return state.url;
    }
}

const mutations = {
    setName( value ){
        this.state.name = value;
    }
}

const actions = {
    setNameActions({commit}, value){
        setTimeout(() => {
            commit('setName', value );
        }, 500 );
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}
复制代码

再修改一下main.js:

import App from './App.vue'
import store from './vuex/store.js'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')
复制代码

一个基本的轮子就已经实现。另外自己写一份组件交互vuex的api调用方法。懒得写,可以直接拷贝案例。

2)手写如何引入vuex

看一下我们的基本轮子,import Vuex from 'vuex'。用的是官方的vuex。那我们来实现一个自己vuex实现。

这里可推荐成两部分:

  • 根据Vue.use(Vuex);我们可以知道,他肯定暴露了自己的install方法。这个install的作用是什么?明显,是将store插入全局变量中。
  • export default new Vuex.Store({});可以看出,他暴露了Store类。这里我们支持多个modlues,我们可以推出,Store把多个modlues合并了。

我们可以尝试写代码:

function install(Vue, storeName = '$store') {
    // 混入:把store选项指定到Vue原型上
    Vue.mixin({
        beforeCreate() {
            // 判断main.js的当期组件选择中,是否有sotre   
            if (this.$options.store) {
                Vue.prototype[storeName] = this.$options.store
            }
        }
    })
}

class Store {
    constructor( options ) {
    }
}

export default {
    Store,
    install
}
复制代码

再写一个组件引入我们的vuex:

<template>
  <div>
      <div>姓名:{{getName}}</div>
      <div>博客:{{getUrl}}</div>
      <div>备注:{{getStatus}}</div>
      <div @click="changeStatus()" style="color:red;text-align: center;" >点我更新数据</div>
  </div>
</template>

<script>
export default {
  name: 'CompB',
  props: {
    msg: String
  },
  computed:{
    getName(){
      return this.$store.getters.getName;
    },
    getUrl(){
      return this.$store.getters.getUrl;
    },
    getStatus(){
      return this.$store.getters.getStatus;
    }
  },
  methods:{
    changeStatus(){
      this.$store.dispatch('changeStatusActions', 'vuex数据变化,欢迎小姑凉,也欢迎小帅哥' );
    }
  }
}
</script>
复制代码

此时,修改我们的 import Vuex from 'vuex'成import Vuex from './myVuex',项目已经不会报错,已经帮我们全局引入store。那么store到底是什么?

3)手写store

store到底是什么,我们再次看图。他包括state变量, getters变量, dispatch方法,mutations方法,此外,他支持modlues。我们分别来实现他。

实现modlues

modlues,其实就是多个对象,合并成一个。我们实现:

首先,我们传过来的options对象,已知又state, getters, mutations, actions, 4个对象, 而modlues内部又有一套,我们处理一下。

 class Store {
    constructor(options) {
      let {
          state = {},
          getters = {},
          mutations = {},
          actions = {},
          modules = {}
      } = options;
      for (var key in modules) {
          state = Object.assign(state, modules[key].state);
          mutations = Object.assign(mutations, modules[key].mutations);
          getters = Object.assign(getters, modules[key].getters);
          actions = Object.assign(actions, modules[key].actions);
      }
      this.state = state;
      this.actions = actions;
      this.mutations = mutations;
      this.getters = getters;
    }
}
复制代码

实现getters

接下来实现,我们getters的方法。getters的实现也偏简单。就是返回state的值,调用重新获取的方法即可。

  • getters是需要双向绑定的。但我们不需要双向绑定所有的getters,只需要绑定项目中事件使用的getters。所以可以删除原来的this.getters的存储。
  • 我们新建一个getters对象,来存储,项目中已经调用的getters方法,此时他需要双向绑定。
  • 遍历对象,返回最后的结果。这样每次调用this.$store.getters时,方法即会拿到对应的值。

来看一下代码

constructor(options) {
    ...//省略
     // this.getters = getters;//删除本行
    observerGettersFunc( getters );
}

 observerGettersFunc(getters) {
    this.getters = {} // store实例上的getters
    // 定义只读的属性
    Object.keys(getters).forEach(key => {
        Object.defineProperty(this.getters, key, {
            get: () => {
                return getters[key](this.state)
            }
        })
    })
}
复制代码

实现commit

再来看看怎么更改state数据。我们来看一个调用实例:

this.$store.commit('changeStatus', 'vuex数据变化,欢迎小姑凉,也欢迎小帅哥' );
复制代码

其实就是两个值,调用commit后的方法,然后赋新的值。

// 触发mutations,需要实现commit
commit = (type, arg) => {
    // this只想Store实例
    const fn = this.mutations[type] // 获取状态变更函数
    fn(this.state, arg)
}
复制代码

此时方法,已经走通,state的值,已经修改成功。但是出现两个致命的问题:

  • state并没有进行监听,他进入到getters的方法。
  • 视图根本不会更新。

鉴于上述原因:

state 要监听,即是赋值监听。我的第一感觉Object.defineProperty/proxy实现双向绑定。首先监听完state,如何更新getters。 第二,store里边,去强制刷新页面?貌似都不靠谱。

经过博友的提示,我来看看官方vuex的写法。

整个vuex的文件,跟state有关的就两个方法, installModule(this, state, [], options)跟 resetStoreVM(this, state)

但是跟上边两点有关的,就是resetStoreVM。我们看一下就是resetStoreVM的方法:

可以看出,他是利用了Vue的双向绑定,以及Vue的数据驱动视图的特点,解决了上边两个问题。

按照原理,我们修改一下我们的初始化state:

  constructor(options) {
       ...//省略
       // this.state = state;//删除本行
          +  this.state = new Vue({
          +    data: state
          +  });
  }
复制代码

再运行案例。你会发现commit后页面已经生效。

实现dispatch

再来看一个dispatch案例:

//页面
this.$store.dispatch('changeStatusActions', 'vuex数据变化,欢迎小姑凉,也欢迎小帅哥' );

//modlues.js文件中方法
const actions = {
    changeStatusActions({commit, state}, value) {
        setTimeout(() => {
            commit('changeStatus', value);
        }, 1000);
    }
}
复制代码

我们可以猜到他源码:

  • 暴露commit,state
  • 根据第一次参数类型,找到了action中对应的方法,例如上述changeStatusActions
 // 触发action,需要实现dispatch
  dispatch = (type, arg) => {
      const fn = this.actions[type]
      return fn({
          commit: this.commit,
          state: this.state
      }, arg)
  }
复制代码

至此,已经完成了vuex的源码

分析vuex

源码

vuex.js文件

let Vue;

function install(_Vue, storeName = '$store') {
    Vue = _Vue;
    Vue.mixin({
        beforeCreate() {
            if (this.$options.store) {
                Vue.prototype[storeName] = this.$options.store;
            }
        }
    })
}

class Store {
    constructor(options) {
        let {
            state = {}, getters = {}, mutations = {}, actions = {}, modules = {}
        } = options;
        for (var key in modules) {
            state = {
                ...state,
                ...modules[key].state
            }
            mutations = Object.assign(mutations, modules[key].mutations);
            getters = {
                ...getters,
                ...modules[key].getters
            };
            actions = Object.assign(actions, modules[key].actions);
        }
        this.state = new Vue({
            data: state
        });
        this.actions = actions;
        this.mutations = mutations;
        this.allGetters = getters;
        this.observerGettersFunc(getters);
    }

    // 触发mutations,需要实现commit
    commit = (type, arg) => {
        const fn = this.mutations[type] 
        fn(this.state, arg)
    }

    // 触发action,需要实现dispatch
    dispatch = (type, arg) => {
        const fn = this.actions[type]
        return fn({
            commit: this.commit,
            state: this.state
        }, arg)
    }

    //数据劫持getters
    observerGettersFunc(getters) {
        this.getters = {} // store实例上的getters
        Object.keys(getters).forEach(key => {
            Object.defineProperty(this.getters, key, {
                get: () => {
                    console.log(`retrunValue:` + JSON.stringify(this.state.$data));
                    return getters[key](this.state)
                }
            })
        })
    }
}

export default {
    Store,
    install
}
复制代码

github完整案例地址

github.com/zhuangweizh…

文件结尾

本文参考

感谢这几篇文章带来的灵感,以及借鉴。

进度

再普及一下博客的进度:

序号博客主题相关链接
1手写vue_mini源码解析juejin.im/post/684790…
2手写react_mini源码解析juejin.im/post/685457…
3手写webpack_mini源码解析juejin.im/post/685457…
4手写jquery_mini源码解析juejin.im/post/685457…
5手写vuex_mini源码解析(即本文)juejin.im/post/685529…
6手写vue_router源码解析预计下周
7手写diff算法源码解析预计8月
8手写promis源码解析预计8月
9手写原生js源码解析(手动实现常见api)预计8月
10手写react_redux,fiberd源码解析等待定,本计划先出该文,整理有些难度
11手写koa2_mini预计9月,前端优先