面试题：什么是 Vue 的 extend 构造器？它的作用是什么？

Vue.extend 是 Vue.js 提供的一个全局 API，用于创建一个“子类”构造器，允许你基于 Vue 构造器扩展出一个可复用的组件定义。它的主要作用是动态创建组件，或者在需要时生成一个组件的构造函数。

1. 基本用法

Vue.extend 接收一个组件选项对象作为参数，返回一个组件的构造函数。你可以通过 new 关键字实例化这个构造函数，生成一个组件实例。

// 使用 Vue.extend 创建一个组件构造器
const MyComponent = Vue.extend({
  template: '<div>这是一个自定义组件</div>',
});

// 实例化组件
const instance = new MyComponent();

// 挂载到 DOM
instance.$mount('#app');

2. 作用

Vue.extend 的主要作用包括：

（1）动态创建组件

在某些场景下，你可能需要动态创建组件，而不是在模板中静态声明。例如，弹窗、通知、提示等动态内容。

const Notification = Vue.extend({
  template: '<div class="notification">{{ message }}</div>',
  data() {
    return {
      message: '这是一个通知',
    };
  },
});

// 动态创建并挂载通知组件
const notification = new Notification().$mount();
document.body.appendChild(notification.$el);

（2）扩展和复用组件

通过 Vue.extend，可以基于现有组件扩展出新的组件，实现逻辑复用。

const BaseComponent = Vue.extend({
  template: '<div>基础组件</div>',
});

const ExtendedComponent = BaseComponent.extend({
  template: '<div>扩展组件</div>',
});

（3）全局注册组件

Vue.extend 可以用于全局注册组件，生成一个组件构造器后，通过 Vue.component 注册为全局组件。

const MyComponent = Vue.extend({
  template: '<div>全局组件</div>',
});

Vue.component('my-component', MyComponent);

（4）与 `$mount` 结合使用

Vue.extend 生成的组件构造器可以通过 $mount 手动挂载到 DOM 中，适用于需要动态插入组件的场景。

const MyComponent = Vue.extend({
  template: '<div>动态挂载的组件</div>',
});

const instance = new MyComponent().$mount();
document.body.appendChild(instance.$el);

3. 与 `Vue.component` 的区别

Vue.extend：返回一个组件构造器，需要手动实例化和挂载。
Vue.component：直接注册一个全局组件，可以在模板中使用。

// Vue.extend
const MyComponent = Vue.extend({
  template: '<div>Extend 组件</div>',
});
new MyComponent().$mount('#app');

// Vue.component
Vue.component('my-component', {
  template: '<div>Component 组件</div>',
});

4. 实际应用场景

（1）动态弹窗

在需要动态创建弹窗时，可以使用 Vue.extend 生成弹窗组件并挂载到 DOM 中。

const Modal = Vue.extend({
  template: `
    <div class="modal">
      <div class="modal-content">
        <slot></slot>
      </div>
    </div>
  `,
});

function showModal(message) {
  const modal = new Modal({
    propsData: { message },
  }).$mount();
  document.body.appendChild(modal.$el);
}

（2）插件开发

在开发 Vue 插件时，可以使用 Vue.extend 创建组件并注入到 Vue 实例中。

const MyPlugin = {
  install(Vue) {
    const MyComponent = Vue.extend({
      template: '<div>插件组件</div>',
    });
    Vue.component('my-component', MyComponent);
  },
};

Vue.use(MyPlugin);