Vue3新语法-创建组件以及挂载实例

[ Vue(2+3) ] 

Vary-ui升级到V3版本之后, 发现很多东西都变了, 包括V3推荐的编译工具,以及vue本身的API, 这里回忆记录一下所有每个遇到的问题

在组件库中, Alert,Message,Confirm等全局式组件的写法有了新的改变,比如:

vue2版本中:

1
2
3
4
5

import Vue from 'vue'
import Alert from './src/Alert.vue';
const Component = Vue.extend(Alert);
const eleInstance = new Component();
const el = eleInstance.$mount().$el;

vue3本版中:

1
2
3
4
5

import {createApp} from 'vue'
import Alert from './src/Alert.vue';
const Component = createApp(Alert);
const instance = Component.mount();
const ele = instance.$el

这里牵扯到如下几个关键点:

createApp与extends

extends在vue2中, 意指创建一个Vue的扩展组件, 该语法在vue3中已经看不到了, 在vue3中, 都统一推荐使用createApp了

生成组件实例

vue2中, 通过Vue.extends()生成的组件, 要想创建一个实例, 还需要经过new关键字来实现.

而vue3中, createApp()方法的返回值, 已经是一个标准的vue3实例了

挂载组件以及获取组件的DOM根节点

vue2中, 挂载组件实例需要通过$mount方法, vue3中, 去掉了前面的$符号

vue2中, $mount方法无论有没有参数都可以通过其返回值拿到组件的DOM根节点, 而vue3中, mount的参数必须存在, 且要求必须能根据该参数找到对应的DOM元素, 然后才能通过其返回值获取到组件的DOM根节点, 如果参数为空或者对应的元素不存在, mount的返回值为undefined

组件的销毁

vue3中用unmount()代替了vue2中的$destroy()方法, 用来手动销毁组件, 比如Alert组件中的这部分:

1
2
3
4
5
6

import Alert from './src/Alert.vue'
const component = createApp(Alert);

setTimeout(()=>{
  component.unmount()
}, 3000)