Skip to content

Commit 9a365fe

Browse files
committed
refactor: use more descriptive name for v-show original display key
1 parent c6defc8 commit 9a365fe

File tree

3 files changed

+11
-10
lines changed

3 files changed

+11
-10
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
} from '@vue/runtime-dom'
2727
import { type SSRContext, renderToString } from '@vue/server-renderer'
2828
import { PatchFlags } from '@vue/shared'
29-
import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
29+
import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
3030

3131
function mountWithHydration(html: string, render: () => any) {
3232
const container = document.createElement('div')
@@ -1252,7 +1252,7 @@ describe('SSR hydration', () => {
12521252
foo
12531253
</div>
12541254
`)
1255-
expect((container.firstChild as any)[vShowOldKey]).toBe('')
1255+
expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
12561256
expect(vnode.el).toBe(container.firstChild)
12571257
expect(`mismatch`).not.toHaveBeenWarned()
12581258
})

packages/runtime-dom/src/directives/vShow.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import type { ObjectDirective } from '@vue/runtime-core'
22

3-
export const vShowOldKey = Symbol('_vod')
3+
export const vShowOriginalDisplay = Symbol('_vod')
44

55
interface VShowElement extends HTMLElement {
66
// _vod = vue original display
7-
[vShowOldKey]: string
7+
[vShowOriginalDisplay]: string
88
}
99

1010
export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
1111
beforeMount(el, { value }, { transition }) {
12-
el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
12+
el[vShowOriginalDisplay] =
13+
el.style.display === 'none' ? '' : el.style.display
1314
if (transition && value) {
1415
transition.beforeEnter(el)
1516
} else {
@@ -24,7 +25,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
2425
updated(el, { value, oldValue }, { transition }) {
2526
if (
2627
!value === !oldValue &&
27-
(el.style.display === el[vShowOldKey] || !value)
28+
(el.style.display === el[vShowOriginalDisplay] || !value)
2829
)
2930
return
3031
if (transition) {
@@ -51,7 +52,7 @@ if (__DEV__) {
5152
}
5253

5354
function setDisplay(el: VShowElement, value: unknown): void {
54-
el.style.display = value ? el[vShowOldKey] : 'none'
55+
el.style.display = value ? el[vShowOriginalDisplay] : 'none'
5556
}
5657

5758
// SSR vnode transforms, only used when user includes client-oriented render

packages/runtime-dom/src/modules/style.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
22
import { camelize, warn } from '@vue/runtime-core'
3-
import { vShowOldKey } from '../directives/vShow'
3+
import { vShowOriginalDisplay } from '../directives/vShow'
44
import { CSS_VAR_TEXT } from '../helpers/useCssVars'
55

66
type Style = string | Record<string, string | string[]> | null
@@ -53,8 +53,8 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
5353
// indicates that the `display` of the element is controlled by `v-show`,
5454
// so we always keep the current `display` value regardless of the `style`
5555
// value, thus handing over control to `v-show`.
56-
if (vShowOldKey in el) {
57-
el[vShowOldKey] = hasControlledDisplay ? style.display : ''
56+
if (vShowOriginalDisplay in el) {
57+
el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ''
5858
style.display = currentDisplay
5959
}
6060
}

0 commit comments

Comments
 (0)