vue.extend与vue.component区别

1、vue.extend

vue.extend使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

vue.extend相当于一个扩展实例构造器，用于创建一个具有初始化选项的Vue子类，在实例化时可以进行扩展选项，最后使用$mount方法绑定在元素上。

用法：

<template>
  <div id="app">
  </div>
</template>

<script>
import Vue from 'vue'
// 定义初始选项
var Hello = Vue.extend({
  template: `
    <div>
      <p v-if="flag">hello, {{name}}</p>
      <button @click="welcome">欢迎标语</button>
    </div>`,
  data () {
    return {
      name: 'zhangsan',
      flag: false
    }
  }
})
// 使用setTimeout是解决报#app元素找不到的警告
setTimeout(() => {
// 扩展选项
  new Hello({
    methods: {
      welcome () {
        this.flag = !this.flag
      }
    }
  }).$mount('#app')
}, 0)
export default {
  name: 'App',
  data () {
    return {
    }
  }
}
</script>

应用场景：
比如我们要实现一个dialog对话框组件时，可以选择将组件插入到body还是其他节点中。

2、vue.component

vue.component用于全局注册组件
大致用法：

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

例子：

<template>
  <div id="app">
    <hello></hello>
  </div>
</template>

<script>
import Vue from 'vue'
var Hello = Vue.extend({
  template: `
    <div>
      <p v-if="flag">hello, {{name}}</p>
      <button @click="welcome">欢迎标语</button>
    </div>`,
  data () {
    return {
      name: 'zhangsan',
      flag: false
    }
  },
  methods: {
    welcome () {
      this.flag = !this.flag
    }
  }
})
Vue.component('hello', Hello)
export default {
  name: 'App',
  data () {
    return {
    }
  }
}
</script>

<style>

</style>

或者

<template>
  <div id="app">
    <hello></hello>
  </div>
</template>

<script>
import Vue from 'vue'
Vue.component('hello', {
  template: `
    <div>
      <p v-if="flag">hello, {{name}}</p>
      <button @click="welcome">欢迎标语</button>
    </div>`,
  data () {
    return {
      name: 'zhangsan',
      flag: false
    }
  },
  methods: {
    welcome () {
      this.flag = !this.flag
    }
  }
})
export default {
  name: 'App',
  data () {
    return {
    }
  }
}
</script>

<style>

</style>

参考：
https://blog.csdn.net/qq_41807489/article/details/88981825
https://cn.vuejs.org/v2/api/index.html#Vue-component