core: The bug in the v-show directive of v3.4.16 causes the components to not display.

Vue version

3.4.16

Link to minimal reproduction

Element Plus Playground

Steps to reproduce

You can test it at the link above. Choose Element Plus version 2.5.5 and Vue version 3.4.16. After selecting, you will notice that clicking the el-select dropdown does not display anything. Checking the console, it’s observed that the popup layer is set to display: none , causing it not to show. Switching Vue version to 3.4.15 restores normal functionality.

After investigation, it’s found that the following two changes under v3.4.16 caused this issue. I tested locally and directly reverted these two changes in the code under node_modules runtime-dom/dist , which restored normal functionality.

Besides el-select, there are many other components that are not displayed properly, such as el-container, el-menu, el-scrollbar, el-overlay, etc. After examining the code, it’s noticed that these components are all implemented using rendering functions. Components using template seem to display correctly.

https://github.com/vuejs/core/compare/v3.4.15...v3.4.16 https://github.com/vuejs/core/commit/9b19f0912104bfccb10c8cf5beab02b21a648935

https://github.com/vuejs/core/blob/13393308503cc6b32f6974999873427c5fd62fc0/packages/runtime-dom/src/directives/vShow.ts#L25

  updated(el, { value, oldValue }, { transition }) {
-   if (!value === !oldValue) return
+   if (!value === !oldValue && el.style.display === el[vShowOldKey]) return
    if (transition) {
      if (value) {
        transition.beforeEnter(el)

https://github.com/vuejs/core/blob/13393308503cc6b32f6974999873427c5fd62fc0/packages/runtime-dom/src/modules/style.ts#L41

  // indicates that the `display` of the element is controlled by `v-show`,
  // so we always keep the current `display` value regardless of the `style`
  // value, thus handing over control to `v-show`.
  if (vShowOldKey in el) {
+   el[vShowOldKey] = style.display
    style.display = currentDisplay
  }

v3.4.16 版本会导致 element-plus 所有用渲染函数创建的组件都无法显示

可以在上面的链接测试，Element Plus版本选择2.5.5，Vue版本选择3.4.16，选择后可以发现点击 el-select 下拉框无法显示，看控制台发现是弹出层被设为了 display: none 导致无法显示，将Vue版本切换为 3.4.15 后恢复正常。

排查后发现是 v3.4.16 这两个改动导致的，我本地测试直接改了 node_modules下的 runtime-dom/dist 的代码还原这两个改动后就恢复正常。

除了 el-select， 无法显示的组件还有很多，比如 el-container 、el-menu 、el-scrollbar 、 el-overlay 等，看了下代码，发现这些组件都是用渲染函数实现的，使用 template 的组件好像都正常显示。

What is expected?

Displayed normally.

What is actually happening?

Not displayed.

System Info

No response

Any additional comments?

No response