Vue.js 中的 mixin 和 extend 的区别是什么？

mixin 和 extend 都是 Vue.js 中实现组件继承的方式,但两者有很大区别:

mixin:

1. 混入(mixin)是一种分发可复用功能的灵活方式。一个组件可以同时使用多个混入对象。
2. 混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

使用方法:

js
var mixin = {
  methods: { ... }
}

var Component = {
  mixins: [mixin],
  // ...
}

示例:

js
var myMixin = {
  methods: {
    foo() { ... }
  }  
}

var Component = {
  mixins: [myMixin],
  created() { 
    this.foo()  // 调用混入的方法
  }
}

extend:

1. 继承(extend)是模仿 ES6 class 的继承方式实现的原型继承。
2. 父类的方法和选项将被“继承”到子类。

使用方法:

js
var Parent = { ... } 
var Child = {
  extends: Parent,
  ...  
}  

示例:

js
var Parent = {
  data() {
    return { msg: 'parent' }
  }
}  

var Child = {
  extends: Parent,  
  created() { 
    console.log(this.msg)  // parent 
  } 
} 

所以:
mixin 是一种灵活的多继承方式,可以混入多个对象。
extend 是标准的原型继承,只能继承一个对象。
mixin 适用于分发可复用的方法或计算属性,而不互相依赖。
extend 适用于扩展父组件的选项,保持二者之间稳固的继承关系。