Vue version

3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNVNtq20AQ/ZVBL1awLNG6T64T0oYUWmgS0pInvcjS2FainV32ogSC/72zu7aipjYUDPbO5cyZMzN+Tb4olfcOk0WyNLVulQWD1qmLklqhpLbwChrXGdQaK4sPN7LBjC3UoIbKwIPD+/DIQNJP6chik8EWdrDWUsCEoScD1JUUam/PC//wlSefS+rQAjkB5/ChpFqSsdBIcY9rtnD19Oxg9UnfHNW2lVR17E2VlsqcnV/Aa0nAwdZpgm06adp+wkRSn5FBjGKYXUlFAXVFQNKCUw03FUo/b5HAGYS1O6DXnCoJyR6q957hSIgA/kYnixwYbeH72HE5rmW3rQH+bKRs3oA+HkE6kj9omqZDj4PkaS+yvU55X3UOfX+DVNuKmg6vurZ+8joN6berR6xtXhnTbogh8qHNPKjELAKD6ZS/PBww3VFQ1Cw947GxmMsibg3vCz8sCtWxl1/LlbNWElzWnsF5mYz4lMkFY0+nyyIGcTjAkifmh82hsSeOWhZs9GDFCDnJkrhPM1Gp/NFI4uUNrZV7hymTRWzW23jH/JsZWKvMoijqhjitwa7tdU5oC1KiuOSwQrPWrcAZE7ic55/yOdc3dmzO0YjZSstng5pByiQblSnY2KOexfNA/b9l36WNS79z/VPeV+cx7FgUa3jw63bzThI/ubZDfav8lv4tTdV18vlHsFntcOil3mL9dMT+aF5iT3caA7NR/7bSG7TRff3rBl/49+AUsnHdfgwnnPdoZOc8xxj21fl9YQ2HuMD2e5hwS5vf5vrFIplDU55oUCPEh3n4ozrV+hvdeT4fqXj4Wzryh9jguiW880eSMk64khsnVkwy3N3JW4jLHX7APoOZ+DPbcVX2Hl3z3R/RPOzK

Steps to reproduce

when use functioal component, we can not update vnode(by createVNode).

Note: 3.3 is ok

What is expected?

can update like 3.3

What is actually happening?

can not update

System Info

No response

Any additional comments?

No response

老师来发声了，赞赞赞

Can you set effect.dirty to true before calling update?

For example like this: playground

Can you set effect.dirty to true before calling update?

For example like this: playground

component.update is not public api. effect.dirty also not public api. we should avoid use this. However, due to historical reasons, if the official can support solving the component.update problem. Historical versions will be compatible. If not, we will use public api to reconstruct this code as much as possible instead of not safe api again.

Using internal API/behaviours can cause these sort of issues, since they are not public they might not be tested directly and the tests are done by other places that rely on that behaviour.

My personal opinion and not talking as Vue team or any official manner:

I think there's an incorrect usage of the internal function but on the other hand I would expect .update to be a very similar behaviour to $forceUpdate which would trigger a re-render regardless of dependencies. Is also odd that the stateful component works and stateless does not, making me think this might be a bug, altho in template usages it works as expected. As for effect.dirty = true, there's some usages in the code base to trigger this exact behaviour, I cannot recommend that, because there's no guarantee it will keep working in the future.

One way to solve this in most of v3 releases is to use cloneVNode to update the node:

// vm.component.update()
// I don't really recommend updating/mutating the props directly
VueRender(cloneVNode(vm, vm.component.props), domRef.value)

The correct usage with public APIs: for each update, you should be creating a new vnode with the new props and then call render again on the same DOM container:

const handleClick = ()=> {
-  Object.assign(vm.component.props, {num: ++num})
-  vm.component.update();
+  VueRender(createVNode(CompFunctional, { num: ++num }), domRef.value)
}

Demo

Closing as wontfix, as the workaround is relatively straightforward.