Vue基础知识Vue.extend详解

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

学习开始之前我们先看一眼官方文档是怎么介绍的
Vue.extend(options)
我这里直接截图过来了

在vue项目中，我们有了初始化的根实例之后，页面之间都是通过router进行管理，组件也是通过import进行局部注册，相比于extend轻松不少，但是这样也有一定的缺点，比如：

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

这个时候Vue.extend + $mount就派上用场了
我举一个简单的小例子：

1. 创建一个组件模板

import Vue from 'vue'

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

2. 我们需要将它手动挂载到body节点上面

const test = new testConstructor().$mount()

3. 我们可以通过$el属性访问我们创建出来的test组件了

document.body.appendChild(test.$el)