深入浅析Vue中mixin和extend的区别和使用场景

Vue中有两个较为高级的静态方法mixin和extend，接下来我们来讨论下关于他们各自的原理和使用场景。

Mixin：

原理：

先来看看官网的介绍：

参数：{Object} mixin

用法：

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。   Vue.mixin({    created: function () {     var myOption = this.$options.myOption     if (myOption) {      console.log(myOption)     }    }   })      new Vue({    myOption: 'hello!'   })   // => "hello!"

我们知道，Vue.mixin传递的这个参数对象，在初始化Vue实例的时候会merge到options上，下面是Vue源码中对mixin的操作。

// src/core/global-api/mixin.js export function initMixin (Vue: GlobalAPI) {  Vue.mixin = function (mixin: Object) {   this.options = mergeOptions(this.options, mixin)   return this  } }// src/core/instance/index.js function Vue (options) {   if (process.env.NODE_ENV !== 'production' &&   !(this instanceof Vue)   ) {   warn('Vue is a constructor and should be called with the `new` keyword')   }   this._init(options) }  initMixin(Vue) ...  export default Vue

也就是说，mixin只是对我们在初始化Vue实例时传递的配置对象的一个扩展。

就像上面官网实例写的例子，我们在执行Vue.mixin方法时传递一个配置对象进去，对象里面有个created勾子函数，通过源码我们可以看到这个传递进来的对象最终会和我们在初始化实例也就是new Vue(options)时的这个options合并(通过上面源码中的mergeOptions方法),保存在option上。

使用场景：

当我们需要全局去注入一些methods,filter或者hooks时我们就可以使用mixin来做。 比如我们希望每一个Vue实例都有一个print方法，我们就可以这么做：

Vue.mixin({    methods: {      print() {        console.log(`我是一个通过mixin注入的方法！`)      }    }  })

或者我们想要去监听在什么阶段时什么组件被加载了，被卸载了等等，我们可以这么做：

Vue.mixin({    mounted() {      console.log(`${this.$route.name} component mounted!`)    },    destroyed() {      console.log(`${this.$route.name} component destroyed!`)    }  })

如果我们并不想给每一个组件实例都混入这些配置options，而只是个别的组件，最好不要使用mixin，它可能会影响到我们组件的性能。

Extend：

原理：

先来看看官网的介绍：

参数：{Object} options

用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。