业务场景
假设现在有一个可能在全局任何地方调用的vue组件你会怎么办？非常简单，在app.vue下的router-view同级写上这个组件，在全局中加一个变量v-if判断这个变量就解决了！
tempalte中
1
2
3
4
js中
export const showComponent = () => {
xxxStore.yourComponentVisible = true;
};
export const hideComponent = () => {
xxxStore.yourComponentVisible = false;
};
1
2
3
4
5
6
某页面中
const handleSubmitForm = async() = >{
showComponent()
await reqGetUserInfo()
hideComponent()
}
1
2
3
4
5
完美！！本文结束！！
一点也不好笑，我们进入正题。先看看需要了解到的方法，再来实现这个功能。
主要方法
h函数(更准确的名字应该叫createVnode)
从字面意思上来看，简单来说这个东西就是创建虚拟dom用的，在本文里面，它可以将你写的组件，转成vnode，也就是虚拟Dom。这里不做详细赘述。可以看下面文档链接。
api详细用法及信息
render函数
白话说就是把你的虚拟dom通过该方法挂载到某一个节点上面。这里不做详细赘述。可以看下面文档链接
api详细用法及信息
实现思路
看过了上面两个方法，先把组件转成虚拟dom，再将虚拟dom挂载到某节点上。那么知道了这些，实现这个功能就很简单了。这里用一个全局loading组件做示例。
简单版实现代码
import UploadLoading from '@/components/UploadLoading/index.vue'
import { render, h, ref, RendererNode, RendererElement, VNode, } from 'vue';
interface ILoadingRef {
vnode: VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
div: HTMLDivElement;
}
/**
- 任何页面中调用该组件进行展示
@returns
*/
export const useUploadLoading = () => {
const loadingRef = ref(null);
const showLoading = () => {// 避免重复挂载组件 if (loadingRef.value) return // 在body上挂载一个div const div = document.createElement('div'); document.body.appendChild(div); // 把组件转成虚拟dom const vnode = h(UploadLoading); // 把这个组件挂载到上面创建的div里面 render(vnode, div); loadingRef.value = { vnode, div };};
const hideLoading = () => {
if (!loadingRef.value) return // 在vue中卸载（unMounted）这个元素 render(null, loadingRef.value.div); // Vue 卸载了这个元素，它仍然存在于 DOM 中，需要手动移除 document.body.removeChild(loadingRef.value.div); loadingRef.value = null;};
return { showLoading, hideLoading };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
那么问题来了，为什么要走下面两个方法呢？这不是一个意思吗？
render(null, loadingRef.value.div);
document.body.removeChild(loadingRef.value.div);
1
2
其实这里看似一样其实另有玄机，render函数让这个组件执行所有的组件卸载生命周期，但元素还在dom上。比如说你的组件中的unMounted中有移除某些事件监听器的方法。要先走这一步让组件按正常流程卸载。
document.body.removeChild才是实际移除这个组件的操作
组件拓展
上面只是说简单实现。那么，现在这个loading组件中，有一个进度条，我需要实时更新这个进度条的进度，怎么办？
那就需要用到h函数的第二个参数了，我们把这个进度条的值传到组件里面。
组件中的props:
const props = defineProps({
progress: {
type: Number,
default: 0
}
});
1
2
3
4
5
6
核心两行代码：
const vnode = h(UploadLoading, { progress: progress.value });
loadingRef.value.vnode.component.props.progress = newProgress;
1
2
完整代码:
import UploadLoading from '@/components/UploadLoading/index.vue'
import { render, h, ref, RendererNode, RendererElement, VNode } from 'vue';
interface ILoadingRef {
vnode: VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
div: HTMLDivElement;
}
/**
- 任何页面中调用该组件进行展示
@returns
*/
export const useUploadLoading = () => {
const loadingRef = ref(null);
const progress = ref(0);
const showLoading = () => {if (!loadingRef.value) { const div = document.createElement('div'); document.body.appendChild(div); // 这里第二个参数传组件的props参数 const vnode = h(UploadLoading, { progress: progress.value }); render(vnode, div); loadingRef.value = { vnode, div }; }};
const hideLoading = () => {
if (loadingRef.value) { render(null, loadingRef.value.div); document.body.removeChild(loadingRef.value.div); loadingRef.value = null; // 重置进度条 progress.value = 0 }};
const updateProgress = (newProgress: number) => {progress.value = newProgress; if (loadingRef.value && loadingRef.value.vnode.component) { // 修改组件中的进度条值 loadingRef.value.vnode.component.props.progress = newProgress; }};
return { showLoading, hideLoading, updateProgress };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
最后直接引入使用就行，我这里用oss文件分片上传做示例：
/**
* 分片上传文件
*/
async uploadFileByChunk(options: IChunkUploadOptions): Promise<string> {
const { showLoading, hideLoading, updateProgress } = useUploadLoading();
const yourOptions = {
// 获取分片上传进度、断点和返回值。
progress: (p: number) => {
updateProgress(Math.floor(p * 100))
}
...省略其他代码
}
showLoading()
try {
await ossUpload(yourOptions)
...省略其他代码
} finally {
hideLoading()
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
总结
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等
