vue.extend()

简述：使用vue.extend返回一个子类构造函数，也就是预设部分选项的vue实例构造器。

也就是说var myVue = vue.extend()返回了vue的一个子类。

后面可以用vue.component()、new myVue().$mount('#id')、new myVue({el:'#id'}) 进行实例化。

实例：

vue.extend()不经常用到，通常直接用vue.component更简单。

vue.extend 应用场景：

假如我想利用js代码动态的渲染组件，比如我想实现一个类似 alert() 的提示插件。这个时候 vue.extend() 和 vm.$mount()就出场了。

vue的信息提示插件message实例:

message/index.js

import Vue from 'vue'
import Message from './index.vue'

const MessagePlugin = Vue.extend(Message)  // 关键代码

export default {
  install(Vue) {
    // this.$message(option)
    Vue.prototype.$message = function({
      type = 'info', // 消息类型
      message = '提示信息!', // 提示信息
      offset = '30', // top偏移量
      showClose = false, // 是否显示关闭 按钮
      duration = 3000, // 提示停留时间
      onClose = null // 提示关闭后的回调函数
    } = {}) {
      let $vvm
      if (!$vvm) {
        // $vvm = new MessagePlugin({
        //   el: document.createElement('div')
        // })
        $vvm = new MessagePlugin()

        $vvm.type = type
        $vvm.showClose = showClose
        $vvm.offset = offset
        $vvm.duration = duration
        $vvm.message = message
        $vvm.onClose = onClose
        $vvm.$mount(document.createElement('div')) //关键代码
        document.body.appendChild($vvm.$el) // 关键代码
      }
      return $vvm.$el
    }
  }
}

message/index.vue