Vue3动态显示隐藏组件

Vue2用v-if或者v-show就直接完事了，可是vue3却没反应，需要设置强制重新渲染。

且Vue3使用this.$forceUpdate会报错

一、在Vue3中使用$forceUpdate 

import {getCurrentInstance} from 'vue';
const instance = getCurrentInstance();
instance.proxy.$forceUpdate();

 二、具体应用

<template>
    <div class="timeLine">
        <el-divider content-position="center">Vertex TimeLine</el-divider>
        <span class="description" @click="setActive(Data)">
            {{ Data.description }}
        </span>
        <span class="green">RUNNING</span>
        <subTask  v-if="Active"/>
    </div>
</template>

<script setup>
import { ref,getCurrentInstance } from "vue";
import subTask from "./subTask.vue";

let whoActive = ref()

let Active = false
const instance = getCurrentInstance();
const Data =
{
    description: "Source: kafka-source -> Flat Map",
}

const setActive = (item) => {
    whoActive = item.description
    Active = !Active
    instance.proxy.$forceUpdate()
    console.log(whoActive, Active)
}
</script>