diff --git a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts index 2f6cd7b3f..448bd2c31 100644 --- a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts +++ b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts @@ -1,4 +1,4 @@ -import { shallowRef } from '@vue/reactivity' +import { ref, shallowRef } from '@vue/reactivity' import { nextTick } from '@vue/runtime-dom' import { createDynamicComponent } from '../src' import { makeRender } from './_utils' @@ -54,4 +54,42 @@ describe('api: createDynamicComponent', () => { await nextTick() expect(html()).toBe('') }) + + test('with v-once', async () => { + const val = shallowRef(A) + + const { html } = define({ + setup() { + return createDynamicComponent(() => val.value, null, null, true, true) + }, + }).render() + + expect(html()).toBe('AAA') + + val.value = B + await nextTick() + expect(html()).toBe('AAA') // still AAA + }) + + test('fallback with v-once', async () => { + const val = shallowRef('button') + const id = ref(0) + const { html } = define({ + setup() { + return createDynamicComponent( + () => val.value, + { id: () => id.value }, + null, + true, + true, + ) + }, + }).render() + + expect(html()).toBe('') + + id.value++ + await nextTick() + expect(html()).toBe('') + }) }) diff --git a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts index a8f55bab6..a1b1e3e98 100644 --- a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts +++ b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts @@ -15,7 +15,8 @@ export function createDynamicComponent( const frag = __DEV__ ? new DynamicFragment('dynamic-component') : new DynamicFragment() - renderEffect(() => { + + const renderFn = () => { const value = getter() frag.update( () => @@ -28,6 +29,10 @@ export function createDynamicComponent( ), value, ) - }) + } + + if (once) renderFn() + else renderEffect(renderFn) + return frag } diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts index a2b2342d9..27f14f712 100644 --- a/packages/runtime-vapor/src/component.ts +++ b/packages/runtime-vapor/src/component.ts @@ -479,9 +479,10 @@ export function createComponentWithFallback( ;(el as any).$root = isSingleRoot if (rawProps) { - renderEffect(() => { + const setFn = () => setDynamicProps(el, [resolveDynamicProps(rawProps as RawProps)]) - }) + if (once) setFn() + else renderEffect(setFn) } if (rawSlots) {