关于vue中的extends,mixins,extend,mixin理解

其实extends,mixins,extend,mixin简单来说，就是用来抽离出组件间公用的部分，从而使整个代码达到封装的目的。
一. mixins
mixins 选项接收一个数组，这个数组可以包含着对象，这个对象里可以包含着各种选项，比如created,mouted…最合并到组件里面，使用的是和 Vue.extend() 一样的选项合并逻辑(可查看官方文档)

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

二.extends
和mixins一样的功能,优先级的话extends > mixins，另外extends接受的是对象

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

三. extend
就是创建组件的构造函数。与vue.component类似，可以实现一个组件，到时会写篇文章做详细说明。

<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>

四. mixin
与mixins一样的功能，只不过它是针对全局的，用法是vue.mixin({…})
官方说：
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

以上的笔记参考以下网站做的自我总结：
1.https://segmentfault.com/a/1190000010095089
2.https://www.cnblogs.com/battle-wang/p/9673577.html
3.https://www.cnblogs.com/gr07/p/10063937.html
4.vue的官网所讲的