Uncaught (in promise): parentComponent.ctx.deactivate is not a function

[codesyofo]

Vue version

3.4.0-alpha.1

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2zAM/SuCd3ACxNaK9uS5Rduhh+2wDduOvqg2k6iRZUGS0xSB//tIKXE+2hW9JCbfI/X4tU3ujMnXPSRFUrraSuOZA9+bm0rL1nTWsy2zMJ+xBuZSw9cOnRq0n7ElG9jcdi1LMTwd6cTY+XNOBmVHuNJ1p51novZyDeyask7Su4t0esAs6AYsYpMpu745f3ISvfF3OUlbIXWKOibEmE5nbKtFC0W6ElmNnnQImUsey8KC0PDQGiU8oFVqsWbOvyi4rpJGOvS/FGyuYPNlIUxxZTZVQrTH3vtOs9tayXqF1LEAEo+Uu4uSR8777PvAvj9hc9SA/4yVjVzf1L3FDviCbbcxbBhKTkCQvgIwmVCUTepa9Q3p3tUalGIW1zsD2lF5aBESOscK6ZAc2zuZVgkrVvAyqkObh4gQtW8R+zQXSj2KehUw1YlG6kWe54HFjzpJ5tHLJT9IDeZITWaJdzjquVzkT67TuHTb8G5CUqUC+9N4iatQJdgEQghDFd3z9+DztofZ3l8voV694X9yOLkCP35ZcGCpvhHzwi7AR/jhzw/Y4PcItl3TK2S/A/4G16meNEbafa8blH3EC2q/hVvAdv11DxuPfdkXRUKJOQR+leBt0Pb+r/SD3Mv8MsRVesAu7u/q9dXaw93igZ1cKEK7E9xd35Rch/sg4zBVsqQ2vWfrDGsHResSN4UgWktc03FDQ6bjQUcVWSvM2agjcFon6ov9XHpvXMF53WgMw1fl2uYaPNem5bdI47bXXraQNV17e5lf5Z9x0cxS5Beow/ljOAfXZo+2e8YlwGRHM6I8YTNsFm+CJvix58/C3pJwRnklY5zj8A/JNtwG

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

[Alfred-Skyblue]

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.

demo

[codesyofo]

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.由于调用 defineComponent 会在每次更新时生成一个新组件，导致 isSameVNodeType 始终返回 false，从而触发卸载，因此应始终使用相同的组件进行渲染。

demo

What if dynamically rendered components are required?

[Alfred-Skyblue]

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.

[Alfred-Skyblue]

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.

core/packages/runtime-core/src/vnode.ts

Lines 355 to 369 in 2c0414f

	export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
	if (
	__DEV__ &&
	n2.shapeFlag & ShapeFlags.COMPONENT &&
	hmrDirtyComponents.has(n2.type as ConcreteComponent)
	) {
	// #7042, ensure the vnode being unmounted during HMR
	// bitwise operations to remove keep alive flags
	n1.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
	n2.shapeFlag &= ~ShapeFlags.COMPONENT_KEPT_ALIVE
	// HMR only: if the component has been hot-updated, force a reload.
	return false
	}
	return n1.type === n2.type && n1.key === n2.key
	}

[codesyofo]

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 component It is no longer a dynamic component

[Alfred-Skyblue]

Based on the usage in the reference demo, we shouldn't redefine the same component each time.

https://play.vuejs.org/#eNqNU01v2zAM/SuCd3ACxNaK9uS5RZOhh+2wDduOvig2k6iRZUGS0wSB//tIOXE+2hW9JCbfI/X4tY+mxqSbFqIsyl1ppfHMgW/NQ6FlbRrr2Z5ZWExYBQup4WuDTg3aT9iKdWxhm5rFGB4PdGIc/Ckng7IjXOiy0c4zUXq5AXZPWUfx9CYenzALugKL2NVjo9GY3T+w/nc1imshdYwKRsQYjydsr0UNWbwWSYmeuAs5c94XhKWg4aE2SnhAK9diw5zfKbgvoko69O8ytlCw/bIUJrsz2yIi2rz1vtHssVSyXCN1kE6ykTK9yXnPeZ89C+zZBZujBvxnLK/k5qFsLdbuM7bf92Fdl3MCgvQ1gEmEomxSl6qtSPeh1qAUs7jWGdCOykOLkNA5lkmH5L6xRcSyNewGbWjzwA8xxwaxTwuh1FyU64CpRlRSL9M0DSx+1kcyz97N+UloMAdqNIm8wxEv5DJ9do3GZduHdyMSKhXYn8ZLXIEiwhYQQhiqaF6+B5+3LUyO/nIF5foN/7PDuWX48cuCA0v1DZgXdgm+h5/+/IAtfg9g3VStQvY74G9wjWpJY0+btbpC2We8oPZbuAFs11/3tPXYl2NRJJSYXeAXEd4E7e7/Sj/JvU1vQ1yhO+zi8Z5eX6s93Sse1sVlInQ4vcPVjcl1ug4yTlMlS2rTerZJsHZQtC79phBES4lLOuxnyHQ+6F5FUgtzNeoeuKwT9fX9XHlvXMZ5WWkMw1flxqYaPNem5o9I47bVXtaQVE39eJvepZ9x0cxKpDeow/lzOAVXJ3PbvOASYLKzGVGesBk26S+CJvix56/C3pJwRXklY5hj9w/+B9qp

[codesyofo]

我的问题，原意应该是动态渲染不同组件，A1 可缓存，B1 不缓存

demo

const render = (name) => defineComponent(() => () => h('main', h(Comp)), {name})

<component :is="render(active)" :key="active" />

[baiwusanyu-c]

const render = (name) => defineComponent(() => () => h('main', h(Comp)), {name})

我觉得这个写法不太对，每次都会调用 defineComponent 生成一个新的组件对象，所以不会被缓存，可以用闭包做一个函数缓存实现你想要的功能

[sunnyphp]

Still not fixed.
Same issues with PR's:
#8068
#5970

[leookun]

This is because components are created by functions, and if this is the case for you, you should use closures in your functions to cache the created components


When I added the cache map, the problem was solved

[edison1105]

render() 每次都会生成一个新的组件，导致不会被缓存。