【VUE】Vue2中Vue.extend方法

在 Vue.js 2.x 版本中，Vue.extend() 方法被用于创建一个新的 Vue 子类，可以在该子类上扩展一些属性、指令和组件选项等，然后进行实例化。
比如，可以在创建一些类似 loading 式的函数式插件时，使用：

在 Vue.js 2.x 版本中，Vue.extend() 方法被用于创建一个新的 Vue 子类，可以在该子类上扩展一些属性、指令和组件选项等，然后进行实例化。

它的语法如下：

var SubClass = Vue.extend(options)

其中 options 对象参数用于传递子类的一些选项（如 data, methods, computed 等），继承自父类的选项也可以在 options 对象中设置。通过 Vue.extend() 来创建的子类，可以像父类一样使用 new 进行实例化。

举个例子，在一个 Vue 实例中使用 Vue.extend()，代码如下：

// 父类组件
var ParentComponent = Vue.extend({
  props: ['msg'],
  template: '<div>{{msg}}</div>'
})

// 子类组件
var ChildComponent = new ParentComponent({
  propsData: {
    msg: 'Hello, Vue.js!'
  }
})

// 手动挂载子类组件到某个元素上
ChildComponent.$mount('#app')

以上代码中，通过 Vue.extend() 创建了一个名为 ParentComponent 的组件，该组件具有一个 props 属性，并在模板中使用了该属性。然后，我们可以通过 new ParentComponent() 创建一个名为 ChildComponent 的子类组件，将 propsData 选项用于传递 msg 属性，最后手动将子类组件挂载到 HTML 中。

使用 Vue.extend() 方法可以帮助我们更好地复用组件和逻辑，避免代码重复和冗余。但需要注意的是，在 Vue.js 3.x 中，Vue.extend() 方法已经被废弃，使用 defineComponent() 方法来进行创建组件的操作。