fix(template-ref): preserve ref removal behavior in non-composition-api usage

close #12554

Author: yyx990803

src/core/vdom/modules/template-ref.ts

@@ -33,6 +33,7 @@ export function registerRef(vnode: VNodeWithData, isRemoval?: boolean) {
   const vm = vnode.context
   const refValue = vnode.componentInstance || vnode.elm
   const value = isRemoval ? null : refValue
+  const $refsValue = isRemoval ? undefined : refValue
 
   if (isFunction(ref)) {
     invokeWithErrorHandling(ref, vm, [value], vm, `template ref function`)
@@ -67,14 +68,14 @@ export function registerRef(vnode: VNodeWithData, isRemoval?: boolean) {
       if (isRemoval && refs[ref] !== refValue) {
         return
       }
-      refs[ref] = value
+      refs[ref] = $refsValue
       setSetupRef(vm, ref, value)
     } else if (_isRef) {
       if (isRemoval && ref.value !== refValue) {
         return
       }
       ref.value = value
-      if (setupRefKey) refs[setupRefKey] = value
+      if (setupRefKey) refs[setupRefKey] = $refsValue
     } else if (__DEV__) {
       warn(`Invalid template ref type: ${typeof ref}`)
     }

test/unit/features/template-ref.spec.ts

@@ -58,7 +58,7 @@ describe('ref', () => {
     expect(vm.$refs.foo).toBe(vm.$el)
     vm.value = 'bar'
     waitForUpdate(() => {
-      expect(vm.$refs.foo).toBe(null)
+      expect(vm.$refs.foo).toBe(undefined)
       expect(vm.$refs.bar).toBe(vm.$el)
     }).then(done)
   })
@@ -101,7 +101,7 @@ describe('ref', () => {
       vm.test = ''
     })
       .then(() => {
-        expect(vm.$refs.test).toBe(null)
+        expect(vm.$refs.test).toBe(undefined)
       })
       .then(done)
   })