fix(hmr): fix the page not updating when using computed value as slot (…

…#7155)

packages/reactivity/src/computed.ts

@@ -1,6 +1,6 @@
 import { DebuggerOptions, ReactiveEffect } from './effect'
 import { Ref, trackRefValue, triggerRefValue } from './ref'
-import { isFunction, NOOP } from '@vue/shared'
+import { isFunction, isHmrUpdating, NOOP } from '@vue/shared'
 import { ReactiveFlags, toRaw } from './reactive'
 import { Dep } from './dep'
 
@@ -56,7 +56,11 @@ export class ComputedRefImpl<T> {
     // the computed ref may get wrapped by other proxies e.g. readonly() #3376
     const self = toRaw(this)
     trackRefValue(self)
-    if (self._dirty || !self._cacheable) {
+    // #7155 - should return the latest value during HMR to avoid the page not updating.
+    if (__DEV__ && isHmrUpdating) {
+      self._dirty = false
+      self._value = self.effect.run()!
+    } else if (self._dirty || !self._cacheable) {
       self._dirty = false
       self._value = self.effect.run()!
     }

packages/runtime-core/__tests__/hmr.spec.ts

@@ -332,6 +332,37 @@ describe('hot module replacement', () => {
     expect(serializeInner(root)).toBe(`<div>bar</div>`)
   })
 
+  // #7155 - should force update computed value when HMR is active
+  test('force update computed value', () => {
+    const root = nodeOps.createElement('div')
+    const parentId = 'test-force-computed-parent'
+    const childId = 'test-force-computed-child'
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      computed: {
+        slotContent() {
+          return this.$slots.default?.()
+        }
+      },
+      render: compileToFunction(`<component :is="() => slotContent" />`)
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      __hmrId: parentId,
+      components: { Child },
+      render: compileToFunction(`<Child>1</Child>`)
+    }
+    createRecord(parentId, Parent)
+
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`1`)
+
+    rerender(parentId, compileToFunction(`<Child>2</Child>`))
+    expect(serializeInner(root)).toBe(`2`)
+  })
+
   // #1305 - component should remove class
   test('remove static class from parent', () => {
     const root = nodeOps.createElement('div')

packages/runtime-core/src/componentRenderUtils.ts

@@ -15,9 +15,14 @@ import {
   blockStack
 } from './vnode'
 import { handleError, ErrorCodes } from './errorHandling'
-import { PatchFlags, ShapeFlags, isOn, isModelListener } from '@vue/shared'
+import {
+  PatchFlags,
+  ShapeFlags,
+  isOn,
+  isModelListener,
+  isHmrUpdating
+} from '@vue/shared'
 import { warn } from './warning'
-import { isHmrUpdating } from './hmr'
 import { NormalizedProps } from './componentProps'
 import { isEmitListener } from './componentEmits'
 import { setCurrentRenderingInstance } from './componentRenderContext'

packages/runtime-core/src/componentSlots.ts

@@ -13,12 +13,12 @@ import {
   ShapeFlags,
   extend,
   def,
-  SlotFlags
+  SlotFlags,
+  isHmrUpdating
 } from '@vue/shared'
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
 import { ContextualRenderFn, withCtx } from './componentRenderContext'
-import { isHmrUpdating } from './hmr'
 import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
 import { toRaw } from '@vue/reactivity'
 

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

@@ -9,9 +9,8 @@ import {
   traverseStaticChildren
 } from '../renderer'
 import { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
-import { isString, ShapeFlags } from '@vue/shared'
+import { isHmrUpdating, isString, ShapeFlags } from '@vue/shared'
 import { warn } from '../warning'
-import { isHmrUpdating } from '../hmr'
 
 export type TeleportVNode = VNode<RendererNode, RendererElement, TeleportProps>
 

packages/runtime-core/src/hmr.ts

@@ -8,12 +8,10 @@ import {
   isClassComponent
 } from './component'
 import { queueJob, queuePostFlushCb } from './scheduler'
-import { extend, getGlobalThis } from '@vue/shared'
+import { extend, getGlobalThis, setHmrUpdating } from '@vue/shared'
 
 type HMRComponent = ComponentOptions | ClassComponent
 
-export let isHmrUpdating = false
-
 export const hmrDirtyComponents = new Set<ConcreteComponent>()
 
 export interface HMRRuntime {
@@ -92,9 +90,9 @@ function rerender(id: string, newRender?: Function) {
     }
     instance.renderCache = []
     // this flag forces child components with slot content to update
-    isHmrUpdating = true
+    setHmrUpdating(true)
     instance.update()
-    isHmrUpdating = false
+    setHmrUpdating(false)
   })
 }
 

packages/runtime-core/src/renderer.ts

@@ -35,7 +35,8 @@ import {
   NOOP,
   invokeArrayFns,
   isArray,
-  getGlobalThis
+  getGlobalThis,
+  isHmrUpdating
 } from '@vue/shared'
 import {
   queueJob,
@@ -58,7 +59,7 @@ import {
 } from './components/Suspense'
 import { TeleportImpl, TeleportVNode } from './components/Teleport'
 import { isKeepAlive, KeepAliveContext } from './components/KeepAlive'
-import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr'
+import { registerHMR, unregisterHMR } from './hmr'
 import { createHydrationFunctions, RootHydrateFunction } from './hydration'
 import { invokeDirectiveHook } from './directives'
 import { startMeasure, endMeasure } from './profiling'

packages/shared/src/hmr.ts

@@ -0,0 +1,2 @@
+export let isHmrUpdating = false
+export const setHmrUpdating = (v: boolean) => (isHmrUpdating = v)

packages/shared/src/index.ts

@@ -13,6 +13,7 @@ export * from './escapeHtml'
 export * from './looseEqual'
 export * from './toDisplayString'
 export * from './typeUtils'
+export * from './hmr'
 
 export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
   ? Object.freeze({})