Vue.extend

Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。它有一个options参数，表示包含组件选项的对象。

Vue.extend语法

Vue.extend( options )
  参数：{Object} options
  用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；
  	   data 选项是特例，需要注意： 在 Vue.extend() 中它必须是函数；

例子1：

在上述代码中，第4行的Vue.extend()方法返回的Vue2就是Vue的子类;第5～7行用于为新创建的Vue2实例添加data数据，由于此时Vue2实例还未创建，所以要把数据写在函数的返回值中;

例子2：

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
 
// 结果如下：
<p>Walter White aka Heisenberg</p>

mixins

mixins: 混合对象, 功能类似于Vue.extend();

使用时,在组件的选项中添加mixins: [mixin]

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

注意事项:

1. minxins可以包含任意组件对象的选项(例如:methods, mounted等钩子函数, components, directives等等),
2. 当组件使用minxins对象时, minxins对象的选项, 将被混合进组件的选项
3. 如果minxins对象的选项是钩子函数(created, mounted等)怎会先于组件的钩子函数执行
4. 如果minxins对象的选项为对象(如methods, directives,components), 则会合并为同意对象, 如果键值发生冲突, 则会使用组件的键值对

参考文献：www.jianshu.com/p/8e2df625d… blog.csdn.net/qq_63358859… www.jianshu.com/p/4c4c409fe…