Vue基础-Vue.extend

说明

Vue.extend属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的Vue.component写法使用extend步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend+$mount这对组合是我们需要去关注的。

官方用法

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

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

<div id="mount-point"></div>

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

// 结果
<p>www.wubin.work</p>

可以看到，extend创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过new Vue({ components: testExtend })来直接使用，需要通过new Profile().$mount('#mount-point')来挂载到指定的元素上。

为什么使用 extend

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

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

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

我们照着官方文档来创建一个示例：

import Vue from 'vue'

const testComponent = Vue.extend({
  template: '<div>{{ text }}</div>',
  data: function () {
    return {
      text: 'extend test'
    }
  }
})

然后我们将它手动渲染：

const extendComponent = new testComponent().$mount()

这时候，我们就将组件渲染挂载到body节点上了。

我们可以通过$el属性来访问extendComponent组件实例：

document.body.appendChild(extendComponent.$el)

我们可以创建一个更加复杂的例子，请参见：vue.extend()+$mount封装一个弹层组件

相关资料