fix(runtime-core): directives should be handled correctly with fragment

packages/runtime-core/src/componentRenderUtils.ts

@@ -6,6 +6,7 @@ import {
 } from './component'
 import {
   Comment,
+  Fragment,
   type VNode,
   type VNodeArrayChildren,
   blockStack,
@@ -234,6 +235,11 @@ export function renderComponentRoot(
     }
   }
 
+  if (!__DEV__ && root.type === Fragment) {
+    const singleRoot = filterSingleRoot(root.children as VNodeArrayChildren)
+    if (singleRoot) root = singleRoot
+  }
+
   // inherit directives
   if (vnode.dirs) {
     if (__DEV__ && !isElementRoot(root)) {

packages/runtime-core/src/renderer.ts

@@ -2102,7 +2102,22 @@ function baseCreateRenderer(
       return
     }
 
-    const shouldInvokeDirs = shapeFlag & ShapeFlags.ELEMENT && dirs
+    let shouldInvokeDirs = shapeFlag & ShapeFlags.ELEMENT && dirs
+    // #5407
+    let root: VNode | undefined = undefined
+    if (
+      __DEV__ &&
+      vnode.patchFlag > 0 &&
+      vnode.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+    ) {
+      const singleRoot = filterSingleRoot(vnode.children as VNodeArrayChildren)
+      if (singleRoot) {
+        root = singleRoot
+        shouldInvokeDirs =
+          singleRoot.shapeFlag & ShapeFlags.ELEMENT && singleRoot.dirs
+      }
+    }
+
     const shouldInvokeVnodeHook = !isAsyncWrapper(vnode)
 
     let vnodeHook: VNodeHook | undefined | null
@@ -2122,7 +2137,12 @@ function baseCreateRenderer(
       }
 
       if (shouldInvokeDirs) {
-        invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount')
+        invokeDirectiveHook(
+          root || vnode,
+          null,
+          parentComponent,
+          'beforeUnmount',
+        )
       }
 
       if (shapeFlag & ShapeFlags.TELEPORT) {
@@ -2175,7 +2195,7 @@ function baseCreateRenderer(
       queuePostRenderEffect(() => {
         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)
         shouldInvokeDirs &&
-          invokeDirectiveHook(vnode, null, parentComponent, 'unmounted')
+          invokeDirectiveHook(root || vnode, null, parentComponent, 'unmounted')
       }, parentSuspense)
     }
   }

packages/vue/__tests__/runtimeCompilerOptions.spec.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, nextTick, ref } from 'vue'
 
 describe('config.compilerOptions', () => {
   test('isCustomElement', () => {
@@ -76,6 +76,40 @@ describe('per-component compilerOptions', () => {
     __DEV__ = true
   })
 
+  test('fragment with comments and directives', async () => {
+    const mounted = vi.fn()
+    const unmounted = vi.fn()
+    const foobar = {
+      mounted,
+      unmounted,
+    }
+    const show = ref(true)
+    const app = createApp({
+      directives: {
+        foobar,
+      },
+      components: {
+        WithCommentNode: {
+          template: `<!-- Comment Node --><h1>With comment node</h1>`,
+        },
+        WithoutCommentNode: {
+          template: `<h1>Without comment node</h1>`,
+        },
+      },
+      setup() {
+        return { show }
+      },
+      template: `<with-comment-node v-foobar v-if="show"></with-comment-node>
+      <without-comment-node v-foobar v-if="show"></without-comment-node>`,
+    })
+    const root = document.createElement('div')
+    app.mount(root)
+    expect(mounted).toHaveBeenCalledTimes(2)
+    show.value = false
+    await nextTick()
+    expect(unmounted).toHaveBeenCalledTimes(2)
+  })
+
   test('whitespace', () => {
     const app = createApp({
       template: `<div><span/>\n  <span/></div>`,