vue.extend vue.component new vue

关系：vue构造->vue组件->vue实例
也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件

### Vue.extend( options )

• 参数
  {Object} options
  *用法
  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data选项是特例，需要注意 - 在Vue.extend() 中它必须是函数

// html 

// js
// 创建构造器
var Profile = Vue.extend({
  template: '
{{firstName}} {{lastName}} aka {{alias}}
',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
// 或者 放到body 里面 （也可以放到#mount-point里面）
//     const extendComponent = new Profile().$mount()
//     document.body.appendChild(extendComponent.$el)

// js 结果
Walter White aka Heisenberg

### Vue.component( id, [definition] )

• 参数
  {string} id
{Function | Object} [definition]
  *用法
  注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

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

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

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

new vue

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({
  // 选项
})

以下是其他网页参考

Vue.component
特点：

1.可通过自身初始化组件结构

2.可通过引入Vue.extend初始化组件结构

3.可通过第三方模板temple.html初始化组件结构

使用范围：

任何已被vue初始化过的元素内

new Vue
this.??表示系统属性值,如this.$el

特点：

1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参

2.可以通过自身components引用组件模板，通过自身data向组件传参

使用范围：

1.仅限于自身

为什么使用 extend

在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

1. 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
2. 所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？

这时候，Vue.extend + vm.$mount 组合就派上用场了。

https://www.cnblogs.com/hentai-miao/p/10271652.html
https://blog.csdn.net/zeping891103/article/details/78133622