Vue.extend 和 new Vue()的区别

Vue.extend 的使用方法

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

new Vue() 的使用方法

//使用vue构造函数创建一个vue实例:事件总线
const eventBus = new Vue()

SFC单文件组件中

export default {
    ...
}

其实export一个config, 这个config 可以用来生成一个Vue实例。 在SFC单文件组件中 this指向该Vue实例

两者的区别

Vue.extend 和 new Vue 是用于创建 Vue 组件的两种方式，它们有以下区别：

1. 使用方式：Vue.extend 是一个工厂函数，用于创建一个 Vue 组件的构造器，需要先调用 Vue.extend 创建构造器，然后再通过 new 构造器创建组件实例。而 new Vue 直接创建一个根组件的实例(即创建一个Vue实例)。

2. 组件复用：Vue.extend 创建的组件构造器可以被多次使用，可以通过多次调用构造器创建多个独立的组件实例，每个实例都具有相同的选项和方法。而 new Vue 创建的组件实例只能是根组件，无法被复用。

3. 组件选项：Vue.extend 创建的组件构造器可以继承父级组件的选项，可以在构造器中添加/重写选项，比如添加新的生命周期钩子、计算属性等。而 new Vue 创建的组件实例只能使用根组件的选项。

4. 组件注册：Vue.extend 创建的组件构造器需要手动进行注册，使用 Vue.component() 方法将构造器注册为全局或局部组件。