mixins

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。

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

mixins的几个规则：

• 一、触发生命周期钩子函数时，先触发mixins组件中的钩子，再调用组件自身的函数。
• 二、当mixins数组中有watch，混入的组件中也存在watch，而且watch中的key相同时，混入组件中的watch会先触发，而后再是组件中的watch触发
• 三、虽然也能在建立mixin时添加data、template属性，但当组件自身也拥有此属性时以本身为准，从这一点也能看出制做者的用心（扩充）。
• 四、data、methods内函数、components和directives等键值对格式的对象均以组件自身或实例为准，组件自身没有定义才会去mixins混入的组件中去找。
• 五、watch，mixins数组中的组件和组件自身的watch会合并在一个数据中，mixins中的组件中的watch会先运行，而后再是组件自己的watch
• 六、mixins选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，在有同名的keys时以组件数据优先。

extends

允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

这和 mixins 类似。

var CompA = { ... }

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

extends与mixins相似；合并规则和mixins一致。extends容许声明扩展另外一个组件(能够是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

mixins和extends是为了扩展组件，均可以理解为继承

区别：

1、mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）
2、优先级>extends>mixins，继承钩子函数的时候，是不进行覆盖的，extends的钩子函数先触发，而后再是mixins的钩子函数触发，最后就是组件自身的钩子函数触发。
3、mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程