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

[xhc-code]

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

[xhc-code]

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

[Wei-Ba]

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

全局绑定的组件，provide/inject等，这个你看下AppContext这个类型里的内容就知道会影响什么了

[Wei-Ba]

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

我上面发了啊
h/createVNode只是按照你传递参数生成一个VNode结构而已
如果你要更具体的推荐直接在RefImpl类get value里的this.dep.track()位置下个断点可以看到里面执行了些什么，也可以看调用堆栈里面是谁调用的
还有个方式是自己实现一个十分简单的响应式就差不多能理解了

[Wei-Ba]

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

devtools相关的我不大清楚，推测是遍历下去的，你创建的组件没挂上去

[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等生命周期时的调用方法。
有研究过的大佬欢迎再次分享自己的心得。

[Wei-Ba]

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

createVNode传的函数你可以理解为是组件的render部分(发生变化会多次调用)，你的生命周期hook不应该加在这里,变成一个正常的组件配置就行了