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]

我的英文更垃圾，听到你此番言论，能中文沟通更好表达。

[xhc-code]

大白话就是响应式的变化需要被render函数捕获到是吧？我看了下render和createVNode的源码，太复杂了，云里雾绕，终究没看明白是怎么加入到queue队列中的。

[Wei-Ba]

大白话就是响应式的变化需要被render函数捕获到是吧？我看了下render和createVNode的源码，太复杂了，云里雾绕，终究没看明白是怎么加入到queue队列中的。

你可以理解为render内部有个effectScope
vue/core/packages/runtime-core/src/renderer.ts

instance.scope.on()
const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
instance.scope.off()

const update = (instance.update = effect.run.bind(effect))
const job: SchedulerJob = (instance.job = effect.runIfDirty.bind(effect))
job.i = instance
job.id = instance.uid
effect.scheduler = () => queueJob(job)  // effect触发trigger时会执行scheduler

[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的上下文就不需要搞这个