extends和Vue.extend,Vue.component

1.extends

extends.png

看看官方文档怎么写的，其实mixins和extends都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。

const extend = {
  data () {
    return {
      name: 'extend name'
    }
  }
}
const mixin0 = {
  data () {
    return {
      name: 'mixin0 name'
    }
  }
}
const mixin1 = {
  data () {
    return {
      name: 'mixin1 name'
    }
  }
}
// name = 'name'
export default {
  mixins: [mixin0, mixin1],
  extends: extend,
  name: 'app',
  data () {
    return {
      name: 'name'
    }
  }
}

---

2.Vue.extend

Vue-extend.png

Vue.extend返回的是一个扩展实例构造器，也就是预设了部分选项的Vue实例构造器。其主要用来服务于Vue.component。

var  extend=Vue.extend({
   render:h=>{return(
     <div>123</div>
    )},
   data(){return{
      extend:'extend'
   }}
});

Vue.component("extend",extend);

---

3.Vue.component

Vue.component.png

Vue.component()会注册一个全局的组件，其会自动判断第二个传进来的是Vue继续对象（Vue.extend）还是普通对象({...})，如果传进来的是普能对象的话会自动调用Vue.extend。

---

4.总结

理解Vue.extend()和Vue.component()是很重要的。由于Vue本身是一个构造函数(constructor)，Vue.extend()是一个继承于方法的类（class），参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并且返回相应的构造函数。而Vue.component()实际上是一个类似于Vue.directive()和Vue.filter()的注册方法，它的目的是给指定的一个构造函数与一个字符串ID关联起来。之后Vue可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend()。

---

5.与mixins

Vue.component 注册全局组件,为了方便
Vue.extend 创建组件的构造函数,为了复用
mixins、extends 为了扩展

阅读：
Vue 2.0学习笔记：Vue.extend构造器的延伸
Vue.extend and Vue.component