fix(runtime-dom): add name to vShow for prop mismatch check (#13806)

close #13805
re-fix #13744
revert #13777

The implementation in #13777 requires users to configure __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__, otherwise errors like #13805 will occur.

diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts
index 2fa934efe521ca1b3239b77709dbc4b9aa20615e..393d2de11d3fcc5545278d56470f1714e8bf654f 100644 (file)
--- a/packages/runtime-dom/src/directives/vShow.ts
+++ b/packages/runtime-dom/src/directives/vShow.ts
@@ -9,7 +9,9 @@ export interface VShowElement extends HTMLElement {
   [vShowHidden]: boolean
 }
 
-export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
+export const vShow: ObjectDirective<VShowElement> & { name: 'show' } = {
+  // used for prop mismatch check during hydration
+  name: 'show',
   beforeMount(el, { value }, { transition }) {
     el[vShowOriginalDisplay] =
       el.style.display === 'none' ? '' : el.style.display
@@ -45,10 +47,6 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   },
 }
 
-if (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) {
-  vShow.name = 'show'
-}
-
 function setDisplay(el: VShowElement, value: unknown): void {
   el.style.display = value ? el[vShowOriginalDisplay] : 'none'
   el[vShowHidden] = !value