Vue.extend()用法

应用场景：

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

• 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
• 如果没有插槽，需要在某个节点挂载东西
• 所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
  这时候，Vue.extend + vm.$mount 组合就派上用场了。

基础用法：

Vue.extend( options )
参数：{Object} options
用法：使用基础 Vue 构造器，创建一个“子类”。参数是一 个包含组件选项的对象；
data 选项是特例，需要注意： 在 Vue.extend() 中它必须是函数；

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

import Vue from 'vue'

//创建构造器
var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}}</p>',
      data: function () {
        return {
          firstName: "司命",
          lastName: "玄水",
        };
      },
})

//一般在这里可以使用
mounted() {
    
    let ele = this.$el.querySelector("#point")
    //挂载到元素上
    new Profile().$mount(ele)
}

第二种写法

// 1. 定义一个vue模版 
let  tem ={
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data:function(){    
    return{    
        firstName:'Walter',   
        lastName:'White',    
        alias:'Heisenberg'
    }
}

// 2. 调用
const TemConstructor = Vue.extend(tem) 
let ele = this.$el.querySelector("#point")
new TemConstructor({el: ele}) // 生成一个实例，并挂载

注意事项

• new Profile().$mount(ele)等同于new TemConstructor({el: ele})

• 如果有警告，在vue.config.js导入下面这个

  module.exports = {
      runtimeCompiler: true,
  }