Uncaught (in promise): parentComponent.ctx.deactivate is not a function
Vue version
3.4.0-alpha.1
Link to minimal reproduction
Steps to reproduce
step1: click button A1 step2: click button B1 step3: click button A1
What is expected?
no error
What is actually happening?
Uncaught (in promise): parentComponent.ctx.deactivate is not a function
System Info
No response
Any additional comments?
No response
Since calling defineComponent generates a new component with each update, causing isSameVNodeType to always return false, triggering an unmount, you should always use the same component for rendering.
Since calling
defineComponentgenerates a new component with each update, causingisSameVNodeTypeto always return false, triggering an unmount, you should always use the same component for rendering.由于调用 defineComponent 会在每次更新时生成一个新组件，导致 isSameVNodeType 始终返回 false，从而触发卸载，因此应始终使用相同的组件进行渲染。
What if dynamically rendered components are required?
Dynamically rendered components must be cached as different instances of the same component. If a different component is called each time, it will not be cached.
Please note that in the isSameVNodeType function, the condition for determining the same component type is that the type of the two components is the same, and the key of the two components is also the same. However, in your example, each invocation of render returns different components, so they will be unmounted.
Dynamically rendered components must be cached as different instances of the same component. If a different component is called each time, it will not be cached.
must be cached as different instances of the same componentIt is no longer a dynamic component
我的问题，原意应该是动态渲染不同组件，A1 可缓存，B1 不缓存
const render = (name) => defineComponent(() => () => h('main', h(Comp)), {name})
<component :is="render(active)" :key="active" />
const render = (name) => defineComponent(() => () => h('main', h(Comp)), {name})
我觉得这个写法不太对，每次都会调用 defineComponent 生成一个新的组件对象，所以不会被缓存，可以用闭包做一个函数缓存实现你想要的功能