【Vue原理】Mixins - 源码版

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Mixins - 源码版

今天探索的是 mixins 的源码，mixins 根据不同的选项类型会做不同的处理

篇幅会有些长，你知道的，有很多种选项类型的嘛，但不是很难。只是涉及源码难免会有些烦，

不过这篇文章也不是给你直接看的，是为了可以让你学习源码的时候提供微薄帮助而已

如果不想看源码的，可以看我的白话版

【Vue原理】Mixin - 白话版

我们也是要带着两个问题开始

1、什么时候开始合并

2、怎么合并

如果你觉得排版难看，请点击下面原文链接 或者 关注公众号【神仙朱】

---

什么时候合并

合并分为两种

1、全局mixin 和 基础全局options 合并

这个过程是先于你调用 Vue 时发生的，也是必须是先发生的。这样mixin 才能合并上你的自定义 options

Vue.mixin = function(mixin) {
    this.options = mergeOptions(
        this.options, mixin
    );
    return this
};

基础全局options 是什么？

就是 components，directives，filters 这三个，一开始就给设置在了 Vue.options 上。所以这三个是最先存在全局options

Vue.options = Object.create(null);

['component','directive','filter'].forEach(function(type) {
    Vue.options[type + 's'] = Object.create(null);
});

这一步，是调用 Vue.mixin 的时候就马上合并了，然后这一步完成 以后，举个栗子