vue3.0是如何实现插件封装的？

  最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义提示框,所以想着自己封装一个。vue2.x提供了一个vue.extend的全局方法。那么vue3.x是不是也会提供什么方法呢?果然从vue3.x源码中还是找到了。插件封装的方法，还是分为两步。

1、组件准备

  按照vue3.x的组件风格封装一个自定义提示框组件。在props属性中定义好。需要传入的数据流。

<template>
    <div v-show="visible" class="model-container" ref="modal">
      <div class="custom-confirm">
        <div class="custom-confirm-header">{{ title }}</div>
        <div class="custom-confirm-body" v-html="content"></div>
        <div class="custom-confirm-footer">
          <Button @click.prevent.stop="handleOk">{{ okText }}</Button>
          <Button @click.prevent.stop="handleCancel">{{ cancelText }}</Button>
        </div>
      </div>
    </div>
</template>
复制代码

<script lang="ts">
import { defineComponent, watch, reactive, onMounted, onUnmounted, toRefs } from "vue";
export default defineComponent({
  name: "ElMessage",
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    okText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    ok: {
      type: Function,
    },
    cancel: {
      type: Function,
    },
    closeFromWindowClick:{
      type:Boolean,
      default:true
    }
  },
  setup(props, context) {
    const modal=ref(null);
    function removeModal(){
      modal.value&&document.body.removeChild((modal.value! as any).parentNode);
    }
     function handleCancel() {
      removeModal();
      props.cancel && props.cancel();
    }
    function handleOk() {
      removeModal();
      props.ok && props.ok();
    }
    onMounted(()=>{
     props.closeFromWindowClick&&window.addEventListener('click',removeModal)
    })
    onBeforeUnmount(()=>{
      props.closeFromWindowClick&&window.removeEventListener('click',removeModal)
    })
    return {
      modal,
      handleOk,
      handleCancel,
    };
  },
});
</script>
复制代码

2、插件注册

  这个才是插件封装的重点。不过代码量非常少，只有那么核心的几行。主要是调用了vue3.x中的createVNode创建虚拟节点，然后调用render方法将虚拟节点渲染成真实节点。并挂在到真实节点上。本质上就是vue3.x源码中的mount操作。

import { createVNode, render } from 'vue';
import type {App} from "vue";
import MessageConstructor from './index.vue'
const Message: any= function(options:any){
    const container = document.createElement('div')
    //创建虚拟节点
    const vm = createVNode(
      MessageConstructor,
      options,
    )
    //渲染虚拟节点
    render(vm, container)
    document.body.appendChild(container);
}  
export default {
    //组件注册
    install(app: App): void {
        app.config.globalProperties.$message = Message
    }
}
复制代码

  插件封装完整地址。源码位置————packages/runtime-core/src/apiCreateApp中的createAppAPI函数中的mount方法。