diff --git a/packages/compiler-core/__tests__/hydration.spec.ts b/packages/compiler-core/__tests__/hydration.spec.ts
index af7c632c3..0fd3f7232 100644
--- a/packages/compiler-core/__tests__/hydration.spec.ts
+++ b/packages/compiler-core/__tests__/hydration.spec.ts
@@ -1,4 +1,12 @@
-import { createSSRApp, h, ref, nextTick, VNode, Portal } from '@vue/runtime-dom'
+import {
+ createSSRApp,
+ h,
+ ref,
+ nextTick,
+ VNode,
+ Portal,
+ createStaticVNode
+} from '@vue/runtime-dom'
function mountWithHydration(html: string, render: () => any) {
const container = document.createElement('div')
@@ -28,6 +36,21 @@ describe('SSR hydration', () => {
expect(container.textContent).toBe('bar')
})
+ test('comment', () => {
+ const { vnode, container } = mountWithHydration('', () => null)
+ expect(vnode.el).toBe(container.firstChild)
+ expect(vnode.el.nodeType).toBe(8) // comment
+ })
+
+ test('static', () => {
+ const html = '
hello
'
+ const { vnode, container } = mountWithHydration(html, () =>
+ createStaticVNode(html)
+ )
+ expect(vnode.el).toBe(container.firstChild)
+ expect(vnode.el.outerHTML).toBe(html)
+ })
+
test('element with text children', async () => {
const msg = ref('foo')
const { vnode, container } = mountWithHydration(
@@ -148,10 +171,6 @@ describe('SSR hydration', () => {
)
})
- test('comment', () => {})
-
- test('static', () => {})
-
// compile SSR + client render fn from the same template & hydrate
test('full compiler integration', () => {})
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 7091f65db..efb11cf71 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -131,14 +131,16 @@ export function createHydrationFunctions({
parentComponent: ComponentInternalInstance | null,
optimized: boolean
) => {
+ optimized = optimized || vnode.dynamicChildren !== null
const { props, patchFlag, shapeFlag } = vnode
// skip props & children if this is hoisted static nodes
if (patchFlag !== PatchFlags.HOISTED) {
// props
if (props !== null) {
if (
- patchFlag & PatchFlags.FULL_PROPS ||
- patchFlag & PatchFlags.HYDRATE_EVENTS
+ !optimized ||
+ (patchFlag & PatchFlags.FULL_PROPS ||
+ patchFlag & PatchFlags.HYDRATE_EVENTS)
) {
for (const key in props) {
if (!isReservedProp(key) && isOn(key)) {
@@ -172,7 +174,7 @@ export function createHydrationFunctions({
vnode,
el,
parentComponent,
- optimized || vnode.dynamicChildren !== null
+ optimized
)
while (next) {
hasMismatch = true