I need a help for vue render function when vnode update all the time

[Child-qjj]

I think It's a terrible use case, but I have no idea to make it better

 function renderVue(component:VNode | (()=>VNode)){ // the passed compoent will be update when props changed
    const vnode = typeof component === 'function' ? component() : component;
      if (vnode && (vnode.type || vnode.component)) {
        const instance = container._vnode;
        render(vnode, container);
        if (needsUpdate && instance) { // I have to do this make sure the view update
          // and manual trigger update
          instance.component?.update();
        }
      } else {
        console.warn('Invalid Vue component provided to render');
      }
}

[Wei-Ba]

如果我没理解错的话，你是想让通过render渲染的组件保持响应式更新
响应式的effect需要使用函数,可以直接这样用

render(createVNode(() => h(/* component */,  /* props / reactive props */))), container)

[Wei-Ba]

如果我没理解错的话，你是想让通过render渲染的组件保持响应式更新 响应式的effect需要使用函数,可以直接这样用

render(createVNode(() => h(/* component */,  /* props / reactive props */))), container)

我当前是通过render，把一个vnode挂载到对应的container上，然后悬浮选中container的时候会有回调创建新的vnode（实际只有props变了），我理解render是可以做到仅更新但是不卸载原本的vnode的，不过目前看对props中值的watch没有正确触发，所以我上面的代码主动update了一次，在你推荐的代码中我发现每次都mounted和unmounted整个生命周期都触发了，这确实保证了响应式更新，但可能不是预期的行为

你都创建了新的vnode了不就是新组件了么，你要响应式不应该只更改传递的props么，直接修改props就好了

[Child-qjj]

如果我没理解错的话，你是想让通过render渲染的组件保持响应式更新 响应式的effect需要使用函数,可以直接这样用

render(createVNode(() => h(/* component */,  /* props / reactive props */))), container)

我当前是通过render，把一个vnode挂载到对应的container上，然后悬浮选中container的时候会有回调创建新的vnode（实际只有props变了），我理解render是可以做到仅更新但是不卸载原本的vnode的，不过目前看对props中值的watch没有正确触发，所以我上面的代码主动update了一次，在你推荐的代码中我发现每次都mounted和unmounted整个生命周期都触发了，这确实保证了响应式更新，但可能不是预期的行为

你都创建了新的vnode了不就是新组件了么，你要响应式不应该只更改传递的props么，直接修改props就好了

尝试过，但是没触发，大概是这样

const vnode = typeof component === 'function' ? component() : component;
      if (vnode && (vnode.type || vnode.component)) {
        const instance = container._vnode;
      if(!instance){
    render(vnode, container);
}else{
Object.assign(instance.component.props,vnode.props)
}
      
      } else {
        console.warn('Invalid Vue component provided to render');
      }

[Wei-Ba]

demo

[Wei-Ba]

如果我没理解错的话，你是想让通过render渲染的组件保持响应式更新 响应式的effect需要使用函数,可以直接这样用

render(createVNode(() => h(/* component */,  /* props / reactive props */))), container)

我当前是通过render，把一个vnode挂载到对应的container上，然后悬浮选中container的时候会有回调创建新的vnode（实际只有props变了），我理解render是可以做到仅更新但是不卸载原本的vnode的，不过目前看对props中值的watch没有正确触发，所以我上面的代码主动update了一次，在你推荐的代码中我发现每次都mounted和unmounted整个生命周期都触发了，这确实保证了响应式更新，但可能不是预期的行为

你都创建了新的vnode了不就是新组件了么，你要响应式不应该只更改传递的props么，直接修改props就好了

尝试过，但是没触发，大概是这样

const vnode = typeof component === 'function' ? component() : component;
      if (vnode && (vnode.type || vnode.component)) {
        const instance = container._vnode;
      if(!instance){
    render(vnode, container);
}else{
Object.assign(instance.component.props,vnode.props)
}
      
      } else {
        console.warn('Invalid Vue component provided to render');
      }

先不说是不是改的创建出来的组件实例，你修改的也只是个结构

[Child-qjj]

感谢帮助，这个问题成功解决了