應(yīng)用場(chǎng)景：

在 vue 項(xiàng)目中，初始化的根實(shí)例后，所有頁(yè)面基本上都是通過(guò) router 來(lái)管理，組件也是通過(guò) import 來(lái)進(jìn)行局部注冊(cè)，所以組件的創(chuàng)建不需要去關(guān)注，相比 extend 要更省心一點(diǎn)點(diǎn)。但是這樣做會(huì)有幾個(gè)缺點(diǎn)：

• 組件模板都是事先定義好的，如果我要從接口動(dòng)態(tài)渲染組件怎么辦？
• 如果沒(méi)有插槽，需要在某個(gè)節(jié)點(diǎn)掛載東西
• 所有內(nèi)容都是在 #app 下渲染，注冊(cè)組件都是在當(dāng)前位置渲染。如果我要實(shí)現(xiàn)一個(gè)類似于 window.alert() 提示組件要求像調(diào)用 JS 函數(shù)一樣調(diào)用它，該怎么辦？
  這時(shí)候，Vue.extend + vm.$mount 組合就派上用場(chǎng)了。

基礎(chǔ)用法：

Vue.extend( options )
參數(shù)：{Object} options
用法：使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一 個(gè)包含組件選項(xiàng)的對(duì)象；
data 選項(xiàng)是特例，需要注意： 在 Vue.extend() 中它必須是函數(shù)；

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

import Vue from 'vue'

//創(chuàng)建構(gòu)造器
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. 定義一個(gè)vue模版 
let  tem ={
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data:function(){    
    return{    
        firstName:'Walter',   
        lastName:'White',    
        alias:'Heisenberg'
    }
}

// 2. 調(diào)用
const TemConstructor = Vue.extend(tem) 
let ele = this.$el.querySelector("#point")
new TemConstructor({el: ele}) // 生成一個(gè)實(shí)例，并掛載

注意事項(xiàng)

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

• 如果有警告，在vue.config.js導(dǎo)入下面這個(gè)

  module.exports = {
      runtimeCompiler: true,
  }