root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor: use more descriptive name for v-show original display key

This commit is contained in:
Evan You 2024-02-25 21:50:47 +08:00
parent c6defc8df1
commit 9a365fe00d
3 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/runtime-core/__tests__/hydration.spec.ts
View File

@ -26,7 +26,7 @@ import {
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import { type SSRContext, renderToString } from '@vue/server-renderer' import { type SSRContext, renderToString } from '@vue/server-renderer'
import { PatchFlags } from '@vue/shared' import { PatchFlags } from '@vue/shared'
import { vShowOldKey } from '../../runtime-dom/src/directives/vShow' import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
function mountWithHydration(html: string, render: () => any) { function mountWithHydration(html: string, render: () => any) {
const container = document.createElement('div') const container = document.createElement('div')
@ -1252,7 +1252,7 @@ describe('SSR hydration', () => {
foo foo
</div> </div>
`) `)
expect((container.firstChild as any)[vShowOldKey]).toBe('') expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
expect(vnode.el).toBe(container.firstChild) expect(vnode.el).toBe(container.firstChild)
expect(`mismatch`).not.toHaveBeenWarned() expect(`mismatch`).not.toHaveBeenWarned()
}) })

11
packages/runtime-dom/src/directives/vShow.ts
View File

@ -1,15 +1,16 @@
import type { ObjectDirective } from '@vue/runtime-core' import type { ObjectDirective } from '@vue/runtime-core'
export const vShowOldKey = Symbol('_vod') export const vShowOriginalDisplay = Symbol('_vod')
interface VShowElement extends HTMLElement { interface VShowElement extends HTMLElement {
// _vod = vue original display // _vod = vue original display
[vShowOldKey]: string [vShowOriginalDisplay]: string
} }
export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = { export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
beforeMount(el, { value }, { transition }) { beforeMount(el, { value }, { transition }) {
el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display el[vShowOriginalDisplay] =
el.style.display === 'none' ? '' : el.style.display
if (transition && value) { if (transition && value) {
transition.beforeEnter(el) transition.beforeEnter(el)
} else { } else {
@ -24,7 +25,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
updated(el, { value, oldValue }, { transition }) { updated(el, { value, oldValue }, { transition }) {
if ( if (
!value === !oldValue && !value === !oldValue &&
(el.style.display === el[vShowOldKey] || !value) (el.style.display === el[vShowOriginalDisplay] || !value)
) )
return return
if (transition) { if (transition) {
@ -51,7 +52,7 @@ if (__DEV__) {
} }
function setDisplay(el: VShowElement, value: unknown): void { function setDisplay(el: VShowElement, value: unknown): void {
el.style.display = value ? el[vShowOldKey] : 'none' el.style.display = value ? el[vShowOriginalDisplay] : 'none'
} }
// SSR vnode transforms, only used when user includes client-oriented render // SSR vnode transforms, only used when user includes client-oriented render

6
packages/runtime-dom/src/modules/style.ts
View File

@ -1,6 +1,6 @@
import { capitalize, hyphenate, isArray, isString } from '@vue/shared' import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
import { camelize, warn } from '@vue/runtime-core' import { camelize, warn } from '@vue/runtime-core'
import { vShowOldKey } from '../directives/vShow' import { vShowOriginalDisplay } from '../directives/vShow'
import { CSS_VAR_TEXT } from '../helpers/useCssVars' import { CSS_VAR_TEXT } from '../helpers/useCssVars'
type Style = string | Record<string, string | string[]> | null type Style = string | Record<string, string | string[]> | null
@ -53,8 +53,8 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
// indicates that the `display` of the element is controlled by `v-show`, // indicates that the `display` of the element is controlled by `v-show`,
// so we always keep the current `display` value regardless of the `style` // so we always keep the current `display` value regardless of the `style`
// value, thus handing over control to `v-show`. // value, thus handing over control to `v-show`.
if (vShowOldKey in el) { if (vShowOriginalDisplay in el) {
el[vShowOldKey] = hasControlledDisplay ? style.display : '' el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ''
style.display = currentDisplay style.display = currentDisplay
} }
} }