一看就懂的Vue之vue构造函数、vue实例、挂载

之前一直对vue构造函数、vue实例、挂载比较迷惑，今天就想着彻彻底底的搞懂这些知识点，下面我们就进入正题吧。

Vue构造函数

vue的构造函数有两种Vue、Vue.extend();

vue实例

vue实例是通过构造函数生成的，下面我们来通过一个具体的场景来讲解。

场景说明：有一个组件配置对象Notice.vue需要追加body里
设计：有一个全局$create函数将Notice.vue变为真实dom追加到body上

Notice.vue

<template>
  <div id="notice">
    <div v-show="isShow">
      <div>{{title}}</div>
      <div>{{message}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      message: {
        type: String,
        default: ''
      },
      duration: {
        type: Number,
        default: 1000
      }
    },
    data() {
      return {
        isShow: false
      }
    },
    methods: {
      show() {
        this.isShow = true;
        setTimeout(this.hide, this.duration)
      },
      hide() {
        this.isShow = false;
        this.remove();
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

举例1: create.js通过Vue构造函数render函数生成一个根组件实例，

import Vue from 'vue';
    /**
     * 动态生成组件实例，并且挂载至body上
     * @param {*} Component 是组件配置对象
     * @param {*} props 
     */
    export default function create(Component, props) {
      // 借用Vue构造函数来动态生成组件实例
      const vm = new Vue({
        render(h) {
          return h(Component, {props});
        }
      });
    
      // 执行过$mount后根实例上会有$el
      // $mount === document.createElement
      vm.$mount();
    
      // 通过$el属性获取真实的dom
      document.body.appendChild(vm.$el);
    
      // 根组件VueComponent为根实例Vue的$children
      const comp = vm.$children[0];
    
      // 组件销毁
      comp.remove = () => {
        document.body.removeChild(vm.$el);
        comp.$destroy()
      }
    
      return comp;
      
    }

举例2: create.js通过Vue.extend()构造函数创建一个子类构造函数

import Vue from 'vue';
    
    export default function create(Component, props){
    
      // 使用Vue.extend构造器创建一个子类构造函数
      const Ctor = Vue.extend(Component);
    
      // new Ctor()直接生成VueComponent
      const comp = new Ctor({
        propsData: props
      });
    
      // 生成真实dom,只有执行过$mount才会有$el
      // $mount === document.createElement
      comp.$mount();
      
      // 通过$el属性获取真实的dom
      document.body.appendChild(comp.$el);
    
      comp.remove = () => {
        // 组件销毁
        document.body.removeChild(comp.$el);
        comp.$destroy()
      }
    
      return comp;
    }

最后create函数挂到Vue.prototype上生成全局的$create方法。

import create from 'create.js';
import Notice from 'Notice.vue'
Vue.prototype.$create = create;

this.$create(Notice, {
    title: '测试'，
    message: '我就是一个提示信息'
}).show();