Vue2-Vue.extend与$mount

1# 定义

Vue.extend(options) 是 Vue.js 中的一个全局方法，用于创建可复用的 组件构造器。我们可以通过调用 Vue.extend(options) 并定义组件的各种选项（如模板、数据、计算属性、方法等）来生成一个子类（组件构造器）。该子类可以被用来创建新的 Vue 实例，实现组件的复用和扩展功能，还可以通过手动调用 $mount() 将其挂载到其他元素上，实现更灵活的组件渲染和应用。

2# 使用

使用 Vue.extend(options) 的一般流程如下：

1. 调用 Vue.extend(options) 创建一个组件构造器。
2. 在 options 中定义组件的选项，比如模板、数据、计算属性、方法等。
3. 通过 new 关键字使用该组件构造器创建一个新的 Vue 实例（即组件实例）。
4. 调用 $mount() 将组件实例挂载到其他元素下。

const MyComponent = Vue.extend({
  template: '<p>{{ message }}</p>',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    say() {
      console.log(this.message);
    }
  }
});

// 创建一个组件实例
const myInstance = new MyComponent();
myInstance.say(); // 输出: Hello, Vue!

// 挂载组件实例到其他元素上
myInstance.$mount('#app') // 页面显示: hello, Vue!