vue创建实例并挂载 Vue.extend()、new Vue(

简单描述
创建实例 Vue.extend(option),new Vue(options)
挂载实例 $mount el

一. 创建实例

Vue.extend 是new Vue()的一个子类，vue组件构造器
Vue.extend能复用，创建多个个性化实例

1. Vue.extend()

<template>
    <div>
        <div id="extend1"></div>
        <div id="extend2"></div>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default {
    mounted(){
        this.extendCreateComponents();
    },
    methods:{
        extendCreateComponents(){
            let com = Vue.extend({
                data(){
                    return {
                        name:'extend1'
                    }
                },
                template:`
                <div>{{name}}</div>
                `
            })
            new com().$mount('#extend1')
            new com({
                    data(){
                        return{name:'extend2'}
                    }
                }).$mount('#extend2')
        }
    }
}
</script>

2. new Vue()

<template>
    <div>
        <div id="origin1"></div>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default {
    mounted(){
        this.originCreateComponents();
    },
    methods:{
        originCreateComponents(){
            new Vue({
                data(){
                    return {
                        name:'origin1'
                    }
                },
                template:`
                <div>{{name}}</div>
                `
            }).$mount('#origin1')
        }
    }
}
</script>

二. 挂载实例

1. $mount 方式

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

let body = document.body;
let element = document.createElement('div');
element.id = 'dom2'
body.appendChild(element)
new Vue({
    template:`
    <div>组件1</div>
    `
}).$mount('#' + element.id)

2. el 方式

在初始化的最后，检测到如果有 el 属性，则vue自动调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM。

let body = document.body;
let element = document.createElement('div');
element.id = 'dom1'
body.appendChild(element)
new Vue({
    el:'#' + element.id,
    template:`
    <div>组件1</div>
    `
})