fix(runtime-core): Teloport in keepalive should be cached

[linzhe141]

close #11410

Playground - this PR

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.5 kB (+470 B)	34.6 kB (+116 B)	31.2 kB (+159 B)
vue.global.prod.js	147 kB (+470 B)	54.1 kB (+135 B)	48.1 kB (+85 B)

Usages

Name	Size	Gzip	Brotli
createApp	49.8 kB	19.5 kB	17.8 kB
createSSRApp	53.3 kB	21 kB	19.1 kB
defineCustomElement	52 kB	20.3 kB	18.5 kB
overall	63.6 kB (+396 B)	24.7 kB (+123 B)	22.4 kB (+51 B)

[edison1105]

Why not reuse moveTeleport?

core/packages/runtime-core/src/components/Teleport.ts

Line 306 in 8655ced

function moveTeleport(

Suggestions

Implement active and deactive inside TeleportImpl, and reuse moveTeleport within these methods.

export const TeleportImpl {
    //...
	active: activeTeleport
	deactive: deactiveTeleport
}

function activeTeleport(...){
	// try reuse moveTeleport
}
function deactiveTeleport(...){
	// try reuse moveTeleport
}

in KeepAlive

// active
(vnode.type as typeof TeleportImpl).active(...)

// deactive
(vnode.type as typeof TeleportImpl).deactive(...)

[linzhe141]

Why not reuse moveTeleport?

core/packages/runtime-core/src/components/Teleport.ts

Line 306 in 8655ced

function moveTeleport(

Suggestions

Implement active and deactive inside TeleportImpl, and reuse moveTeleport within these methods.

export const TeleportImpl {
    //...
	active: activeTeleport
	deactive: deactiveTeleport
}

function activeTeleport(...){
	// try reuse moveTeleport
}
function deactiveTeleport(...){
	// try reuse moveTeleport
}

in KeepAlive

// active
(vnode.type as typeof TeleportImpl).active(...)

// deactive
(vnode.type as typeof TeleportImpl).deactive(...)

Thanks for your review, I will try to modify it.

[NukeJS]

Small typo, teloport > teleport