Refs are set to null instead of undefined when components are destroyed in vue v2.7.0-alpha.5

[pdanpdan]

Version

2.7.0-alpha.5

Reproduction link

codepen.io

Steps to reproduce

Press the toggle button to cycle the ref

Working case with v2.6.14: https://codepen.io/pdanpdan/pen/QWQVXmr

Failing case with v2.7.0-alpha.5: https://codepen.io/pdanpdan/pen/JjpaQOP

What is expected?

this.$refs.test to be an element or undefined

What is actually happening?

this.$refs.test is null

[posva]

As a workaround, you can do a loose comparison (pretty common for null): ref == null -> true for undefined and null

[pdanpdan]

Yes, I know, but:

• either the change was intentional and it should be documented as a breaking change (and maybe the initial value should be null too)
• or it was an undesired side effect of backporting from vue3 and it should be fixed

As this is alpha stage I think it is a good time for such reports.

[tony19]

The template ref-removal behavior in 2.7.0-alpha differs from 2.6, but it's consistent with Vue 3 (demo) and with @vue/composition-api in Vue 2.6 (demo).

The behavior was introduced in 4608565:

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

Line 35 in 4608565

const value = isRemoval ? null : refValue

Changing that line's null to undefined would restore the original behavior, but would cause inconsistencies with Vue 3. I think it was actually intentional, as the unit tests even explicitly check for null. Perhaps migration docs should be added.

[qiannianchong25]

I don't think is a problem.When the node or component doesn't exit,the component's $refs should delete related key.so return undefined rather than null