【Vue 基础】-- vue.extend 和 vue.mixin的区别

vue.extend

extend 的作用是继承当前的Vue类，传入一个extendOption生成一个新的构造函数。在extend的时候会进行 mergeOption，融合Vue原型上的 baseOption，它是 Vue 的继承。

所以extend出来的子类除了写正常的option之外，还可以写HTML，而且能使用v-model、keep-alive等全局性的组件。并进行挂载

作用：是生成组件类在挂载全局组件和设置了components属性的时候会使用到。在生成DOM的时候会new 实例化挂载。（比如自己写弹窗 Tips 之类的）

例子：

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

vue.mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

注意当组件和mixin对象含有同名选项时：

• data 里会以组件数据优先
• 同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 的钩子将在组件自身钩子之前调用。
• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}