Responsive issues with Vue3 imperative components

[xhc-code]

export function ZTest(){
    let container = document.createElement('div');

    const count = ref(1);

    const renderCount = () => {
        const vnode = createVNode('span', null, count.value.toString());
        render(vnode, container);
    };

    renderCount();

    document.body.appendChild(container.firstElementChild);

    setInterval(()=>{
        count.value++;
        // If you untangle this comment line, it will display normally, but it is equivalent to re rendering the content of the component.
        // renderCount();
        console.log("count", count.value)
    }, 2000);
}

Why isn't the span content of this command based component updated? Not responsive, but count is responsive.

[Wei-Ba]

// - const vnode = createVNode('span', null, count.value.toString());
const vnode = h('span', null, h(() => count.value)) // h === createVNode

[Wei-Ba]

Okay, thank you. I want to make imperative function components, which control and pop up the corresponding component content through JS functions. It's just like the way ElMessageBox.alert works.

我也没怎么弄过这个，但是既然提到了ElMessageBox可以参考下他的源码

我自己也试了做了一个简单的

---

弄完忘回了

[Wei-Ba]

What is the function of the 'vnode. appContext' attribute created by the 'h' function? Do you need to assign a value to this property? Because the vnode.appContext property created by the h and creatVNode functions is NULL.

appContext不是由createVNode创建的，是在createApp中调用createAppContext创建的，在render中该属性会被赋值为父组件的appContext, 你不使用vue的上下文就不需要搞这个

[xhc-code]

好的，我只是看到了这个elementplus有赋值appContext，但是没搞明白哪里有用到，而且影响了什么也不晓得。

[xhc-code]

大佬，能不能给个关于这个h代码在什么时候被加入响应的关键点位置呢？因为我看了createVNode和h函数，但是没看到再什么时候被加入到响应式，被追踪的代码的位置没有看到，很奇怪。通过断点，发现后续更新触发的时候，是在一个queue队列里取得，但是在使用createVNode函数得时候，没有看到这里有步骤加入到响应式中，在render函数里也没有看到明确得将vnode传参加入到响应式queue队列中。
const vnode = h(() => {
// render
return h(inner, {name: count.value})
})

[xhc-code]

还有我发现，使用这种函数式调用方式，无法在devtools得vue调试工具中看到这个实例，也无法看到实例里边得内部信息，这估计是一个偏门得调用方式吧。你怎么认为呢？

[xhc-code]

为了方便起见，这里贴上大致得代码。
LoadingComponent引用的是一个setup函数式组件。
其中visible是组件内部的prop参数。

<script setup>

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})

</script>

import LoadingComponent from './Loading.vue';
import {createVNode, h, nextTick, ref, render} from "vue";

export function useLoading(){

    let container = document.createElement('div');

    const visible = ref(false);

    const vNode = createVNode(()=>{
        return createVNode(LoadingComponent, {
            visible: visible.value,
        });
    });

    render(vNode, container);

    document.body.appendChild(container.firstElementChild);

    visible.value = true;
    setTimeout(()=>{
        visible.value = false;
        render(null, container);
        container = null;
        console.log("关闭显示", visible)
    }, 10000);

}

[xhc-code]

不过这里有个问题是无法在这里加入onMounted等生命周期时的调用方法。
有研究过的大佬欢迎再次分享自己的心得。