The reason

Recently a packaged publishing mechanism was written to detect updates. The function is that the version number is automatically changed when jekins is packaged online and nodeJS is packaged. Then the inconsistent version is detected when front-end detection, indicating that there may be an update.

Webpack project package or Git commit update version number, check project version update implementation

There is a function popover written in it, but vue2 is ok, vue3 is not found in the official website documentation. Now, most of what you’re getting on Baidu is controlled by createApp. But the one thing they didn’t do was guarantee the singleton pattern. But actually, if you look at the message part of Element-Plus and the Ant-Desgin part of the source code you can see that you shouldn’t have created App. There’s a better way (teasing, it doesn’t feel as easy as vue2).

First, implement popover style code

Vue3 has some implementation differences from VUE2, but the actual differences are minor, which will be noted later

<template> <div class="popup-version-tips" v-if="show"> <div class="title"> <span> You have a new version update, </span> </div> <div class="operation"> <el-button size="small" @click="noUpdate"> </el-button> <el-button Size ="small" type="primary" @click="toUpdate"> </el-button> </div> </div> </template> <script> import {ElButton} from 'element-plus' export default { components: { ElButton }, name: 'PopupVersionTips', data() { return { show: true, } }, methods: { noUpdate() { this.show = false }, toUpdate() { this.show = false window.location.reload(true) }, }, } </script> <style scoped lang="scss"> .popup-version-tips { position: fixed; z-index: 9999; right: 0; bottom: 0; background: var(--white); box-shadow: var(--shadow-balck); width: 300px; height: 200px; display: flex; flex-direction: column; .title { border-bottom: var(--border-color-1) 1px solid; font-size: var(--h4-16); height: 40px; display: flex; align-items: center; justify-content: center; } .tips { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; word-break: break-all; padding: 20px; overflow: auto; } .operation { display: flex; justify-content: center; padding-bottom: 20px; } } </style>Copy the code

Vue2 and vue3 The above code needs to be noted

Vue2 does not need to import {ElButton} from ‘element-plus’ to declare components again. Vue3 has a similar internal mechanism to JSX, so it needs to declare components separately, otherwise you will see that parts of the component code will not be presented in the correct style. Vue3’s popover rendering function is inconsistent with vue2’s

The rest can be copied directly under VUe2. No difference.

Vue2 index. Js code (popup control)

Vue2 makes components exported primarily through vue.extend (components)

Code section

import Vue from 'vue' import PopupVersionTips from './index.vue' const PopupVersionTipsConstructor = Vue.extend(PopupVersionTips) const instance = new PopupVersionTipsConstructor({}) const Version = () => { instance.show = true instance $mount () / / unloading instance document. The body. The appendChild (instance. $el)} export default VersionCopy the code

1. Create an instance

const PopupVersionTipsConstructor = Vue.extend(PopupVersionTips)
const instance = new PopupVersionTipsConstructor({})
Copy the code

$mount() $mount()

This allows the component to be rerendered in the place where it was originally rendered

And then let the document. The body. The appendChild (instance. $el) and show will be loaded into

Vue3 index. Js implementation

Vue3, it’s very different and the rendering is very different. There is no official documentation, but there are open source libraries such as Element-UI. Otherwise, we rookies really can’t make fun of. I feel like writing global components.

Code:

import { h, render } from 'vue'
import PopupVersionTips from './index.vue'

let container = document.createElement('div')
const Version = () => {
  const vm = h(PopupVersionTips, {})

  render(null, container)
  render(vm, container)

  document.body.appendChild(container.firstElementChild)
}

export default Version
Copy the code

1, h (),

The h function is actually a secondary encapsulation of createVnode. The source code for Element-UI uses createVnode, but I think the official functions of the two should be the same. I implemented it and found that it was. This function is actually the same as vue2’s vue. extend function

2, render() function

The render function is very similar to the previous $mount function. But it’s different. Basically, the code is that we’ve created another DIV container. This container is not actually rendered to the page, but is very important. I haven’t looked closely at the official implementation of Extend.

The original Extend section automatically traced the original render address and then emptied the data. But creating div containers here is all about positioning and virtual DOM rendering. It must be rendered by a container rendering component. Then the component needs to be emptied, and the location of the original container is required.

Four, thanks for watching.

This article is very simple. The actual application of many APIS is not explained, please refer to the vUE official documentation if necessary

Vue2:cn.vuejs.org/v2/api/#Vue…

Vue3:v3.cn.vuejs.org/guide/rende…