Vue difference in extend, mixins, extends the

Extend
Extend use basis Vue constructor, create a "subclass." It is a parameter containing component object. Similar to the concept of inheritance class (my last article already mentioned, is omitted here)

mixins
may be mixed plural component uses when mixed objects, all objects will be mixed with the options "hybrid" option enters the assembly itself. When the object containing component is mixed with the same name and options, which will be a "combined" the right way. Data objects inside will recursively merge, and component data with priority in case of conflict .
Hook function of the same name will be merged into an array, and therefore will be called. In addition, the mixed object hook will be called before the component itself hook.

// mixins示例
var mixinA = {
  created: function () { console.log(1) }
}
 var mixinB = {
  created: function () { console.log(2) }
}
var vm = new Vue({
  created: function () { console.log(3) },
  mixins: [mixinA ,mixinB ]
})
//依次打印出 1 2 3

extends
declaring an extension of another component (can be a simple option object or constructor) without the use of Vue.extend. This is mainly to facilitate the expansion of a single file component. And mixins similar. But extends only inherit a

var otherComp= { ... }

// 继承 otherComp
var comp = {
  extends: otherComp,
  ...
}

Summary: In order to expand the functional components are priority extend> extends> mixins