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

fix(hydration): force hydration for v-bind with .prop modifier 

ref #7490
This commit is contained in:
Evan You 2023-11-10 13:13:07 +08:00
parent 34b5a5da4a
commit 364f319d21
10 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
View File

@ -85,7 +85,7 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
\\"foo-value\\": model,
\\"onUpdate:fooValue\\": $event => ((model) = $event)
}, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
}, null, 40 /* PROPS, NEED_HYDRATION */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
}
}"
`;

20
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -1089,7 +1089,7 @@ describe('compiler: element transform', () => {
})
})
test('HYDRATE_EVENTS', () => {
test('NEED_HYDRATION for v-on', () => {
// ignore click events (has dedicated fast path)
const { node } = parseWithElementTransform(`<div @click="foo" />`, {
directiveTransforms: {
@ -1108,12 +1108,24 @@ describe('compiler: element transform', () => {
}
)
expect(node2.patchFlag).toBe(
genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
})
test('NEED_HYDRATION for v-bind.prop', () => {
const { node } = parseWithBind(`<div v-bind:id.prop="id" />`)
expect(node.patchFlag).toBe(
genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
const { node: node2 } = parseWithBind(`<div .id="id" />`)
expect(node2.patchFlag).toBe(
genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
})
// #5870
test('HYDRATE_EVENTS on dynamic component', () => {
test('NEED_HYDRATION on dynamic component', () => {
const { node } = parseWithElementTransform(
`<component :is="foo" @input="foo" />`,
{
@ -1123,7 +1135,7 @@ describe('compiler: element transform', () => {
}
)
expect(node.patchFlag).toBe(
genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
})
})

11
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -550,7 +550,7 @@ export function buildProps(
)
} else {
// directives
const { name, arg, exp, loc } = prop
const { name, arg, exp, loc, modifiers } = prop
const isVBind = name === 'bind'
const isVOn = name === 'on'
@ -678,6 +678,11 @@ export function buildProps(
continue
}
// force hydration for v-bind with .prop modifier
if (isVBind && modifiers.includes('prop')) {
patchFlag |= PatchFlags.NEED_HYDRATION
}
const directiveTransform = context.directiveTransforms[name]
if (directiveTransform) {
// has built-in directive transform.
@ -743,12 +748,12 @@ export function buildProps(
patchFlag |= PatchFlags.PROPS
}
if (hasHydrationEventBinding) {
patchFlag |= PatchFlags.HYDRATE_EVENTS
patchFlag |= PatchFlags.NEED_HYDRATION
}
}
if (
!shouldUseBlock &&
(patchFlag === 0 || patchFlag === PatchFlags.HYDRATE_EVENTS) &&
(patchFlag === 0 || patchFlag === PatchFlags.NEED_HYDRATION) &&
(hasRef || hasVnodeHook || runtimeDirectives.length > 0)
) {
patchFlag |= PatchFlags.NEED_PATCH

2
packages/compiler-dom/__tests__/transforms/vOn.spec.ts
View File

@ -272,7 +272,7 @@ describe('compiler-dom: transform v-on', () => {
// should not treat cached handler as dynamicProp, so it should have no
// dynamicProps flags and only the hydration flag
expect((root as any).children[0].codegenNode.patchFlag).toBe(
genFlagText(PatchFlags.HYDRATE_EVENTS)
genFlagText(PatchFlags.NEED_HYDRATION)
)
expect(prop).toMatchObject({
key: {

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

@ -935,6 +935,18 @@ describe('SSR hydration', () => {
)
})
test('force hydrate prop with `.prop` modifier', () => {
const { container } = mountWithHydration(
'<input type="checkbox" :indeterminate.prop="true">',
() =>
h('input', {
type: 'checkbox',
'.indeterminate': true
})
)
expect((container.firstChild! as any).indeterminate).toBe(true)
})
test('force hydrate input v-model with non-string value bindings', () => {
const { container } = mountWithHydration(
'<input type="checkbox" value="true">',

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

@ -477,13 +477,13 @@ describe('vnode', () => {
expect(vnode.dynamicChildren).toStrictEqual([vnode1])
})
test('should not track vnodes with only HYDRATE_EVENTS flag', () => {
test('should not track vnodes with only NEED_HYDRATION flag', () => {
const hoist = createVNode('div')
const vnode =
(openBlock(),
createBlock('div', null, [
hoist,
createVNode('div', null, 'text', PatchFlags.HYDRATE_EVENTS)
createVNode('div', null, 'text', PatchFlags.NEED_HYDRATION)
]))
expect(vnode.dynamicChildren).toStrictEqual([])
})

6
packages/runtime-core/src/hydration.ts
View File

@ -334,13 +334,15 @@ export function createHydrationFunctions(
if (
forcePatch ||
!optimized ||
patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.HYDRATE_EVENTS)
patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
) {
for (const key in props) {
if (
(forcePatch &&
(key.endsWith('value') || key === 'indeterminate')) ||
(isOn(key) && !isReservedProp(key))
(isOn(key) && !isReservedProp(key)) ||
// force hydrate v-bind with .prop modifiers
key[0] === '.'
) {
patchProp(
el,

2
packages/runtime-core/src/renderer.ts
View File

@ -2395,7 +2395,7 @@ export function traverseStaticChildren(n1: VNode, n2: VNode, shallow = false) {
const c1 = ch1[i] as VNode
let c2 = ch2[i] as VNode
if (c2.shapeFlag & ShapeFlags.ELEMENT && !c2.dynamicChildren) {
if (c2.patchFlag <= 0 || c2.patchFlag === PatchFlags.HYDRATE_EVENTS) {
if (c2.patchFlag <= 0 || c2.patchFlag === PatchFlags.NEED_HYDRATION) {
c2 = ch2[i] = cloneIfMounted(ch2[i] as VNode)
c2.el = c1.el
}

2
packages/runtime-core/src/vnode.ts
View File

@ -489,7 +489,7 @@ function createBaseVNode(
(vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
// the EVENTS flag is only for hydration and if it is the only flag, the
// vnode should not be considered dynamic due to handler caching.
vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
vnode.patchFlag !== PatchFlags.NEED_HYDRATION
) {
currentBlock.push(vnode)
}

9
packages/shared/src/patchFlags.ts
View File

@ -57,10 +57,11 @@ export const enum PatchFlags {
FULL_PROPS = 1 << 4,
/**
* Indicates an element with event listeners (which need to be attached
* during hydration)
* Indicates an element that requires props hydration
* (but not necessarily patching)
* e.g. event listeners & v-bind with prop modifier
*/
HYDRATE_EVENTS = 1 << 5,
NEED_HYDRATION = 1 << 5,
/**
* Indicates a fragment whose children order doesn't change.
@ -131,7 +132,7 @@ export const PatchFlagNames: Record<PatchFlags, string> = {
[PatchFlags.STYLE]: `STYLE`,
[PatchFlags.PROPS]: `PROPS`,
[PatchFlags.FULL_PROPS]: `FULL_PROPS`,
[PatchFlags.HYDRATE_EVENTS]: `HYDRATE_EVENTS`,
[PatchFlags.NEED_HYDRATION]: `NEED_HYDRATION`,
[PatchFlags.STABLE_FRAGMENT]: `STABLE_FRAGMENT`,
[PatchFlags.KEYED_FRAGMENT]: `KEYED_FRAGMENT`,
[PatchFlags.UNKEYED_FRAGMENT]: `UNKEYED_FRAGMENT`,