refactor(runtime-vapor): don't record metadata for `on`

This commit is contained in:
三咲智子 Kevin Deng 2024-03-07 17:44:42 +08:00
parent 280b8cbdab
commit ebd3710d72
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
2 changed files with 35 additions and 32 deletions

View File

@ -1,5 +1,6 @@
import { reactive, ref } from '@vue/reactivity'
import {
delegate,
on,
setClass,
setDOMProp,
@ -34,7 +35,7 @@ describe('directive: v-model', () => {
const t0 = template('<input />')
const n0 = t0() as HTMLInputElement
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
on(n0, 'input', () => () => spy(data.value))
return n0
}).render()
@ -66,7 +67,7 @@ describe('directive: v-model', () => {
)
const n0 = t0() as HTMLInputElement
withDirectives(n0, [[vModelSelect, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
on(n0, 'change', () => () => spy(data.value))
return n0
}).render()
@ -93,7 +94,7 @@ describe('directive: v-model', () => {
setDOMProp(n0, 'type', 'number')
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -117,8 +118,8 @@ describe('directive: v-model', () => {
const t0 = template('<input />')
const n0 = t0() as HTMLInputElement
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
on(n0, 'update:modelValue', () => spy)
delegate(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => spy)
return n0
}).render()
@ -141,7 +142,7 @@ describe('directive: v-model', () => {
const t0 = template('<input />')
const n0 = t0() as HTMLInputElement
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => (toggle.value ? spy1 : spy2))
delegate(n0, 'update:modelValue', () => (toggle.value ? spy1 : spy2))
return n0
}).render()
@ -168,7 +169,7 @@ describe('directive: v-model', () => {
const t0 = template('<textarea />')
const n0 = t0() as HTMLInputElement
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -204,14 +205,14 @@ describe('directive: v-model', () => {
withDirectives(input1, [
[vModelDynamic, () => data.number, '', { number: true }],
])
on(input1, 'update:modelValue', () => val => (data.number = val))
delegate(input1, 'update:modelValue', () => val => (data.number = val))
// trim
setClass(input2, 'trim')
withDirectives(input2, [
[vModelDynamic, () => data.trim, '', { trim: true }],
])
on(input2, 'update:modelValue', () => val => (data.trim = val))
delegate(input2, 'update:modelValue', () => val => (data.trim = val))
// trim & number
setClass(input3, 'trim-number')
@ -223,14 +224,18 @@ describe('directive: v-model', () => {
{ trim: true, number: true },
],
])
on(input3, 'update:modelValue', () => val => (data.trimNumber = val))
delegate(
input3,
'update:modelValue',
() => val => (data.trimNumber = val),
)
// lazy
setClass(input4, 'lazy')
withDirectives(input4, [
[vModelDynamic, () => data.lazy, '', { lazy: true }],
])
on(input4, 'update:modelValue', () => val => (data.lazy = val))
delegate(input4, 'update:modelValue', () => val => (data.lazy = val))
return n0
}).render()
@ -282,7 +287,7 @@ describe('directive: v-model', () => {
withDirectives(n1, [
[vModelDynamic, () => data.value, '', { number: true }],
])
on(n1, 'update:modelValue', () => val => (data.value = val))
delegate(n1, 'update:modelValue', () => val => (data.value = val))
setDOMProps(n2, [
['class', 'bar'],
@ -294,7 +299,7 @@ describe('directive: v-model', () => {
withDirectives(n2, [
[vModelDynamic, () => data.value, '', { lazy: true }],
])
on(n2, 'update:modelValue', () => val => (data.value = val))
delegate(n2, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -360,7 +365,7 @@ describe('directive: v-model', () => {
const n0 = t0() as HTMLInputElement
setDOMProp(n0, 'type', 'checkbox')
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -396,7 +401,7 @@ describe('directive: v-model', () => {
['false-value', 'no'],
])
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -434,7 +439,7 @@ describe('directive: v-model', () => {
['false-value', { no: 'no' }],
])
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -470,7 +475,7 @@ describe('directive: v-model', () => {
['value', 'foo'],
])
withDirectives(n1, [[vModelDynamic, () => data.value]])
on(n1, 'update:modelValue', () => val => (data.value = val))
delegate(n1, 'update:modelValue', () => val => (data.value = val))
setDOMProps(n2, [
['class', 'bar'],
@ -478,7 +483,7 @@ describe('directive: v-model', () => {
['value', 'bar'],
])
withDirectives(n2, [[vModelDynamic, () => data.value]])
on(n2, 'update:modelValue', () => val => (data.value = val))
delegate(n2, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -534,7 +539,7 @@ describe('directive: v-model', () => {
['value', 'foo'],
])
withDirectives(n1, [[vModelDynamic, () => data.value]])
on(n1, 'update:modelValue', () => val => (data.value = val))
delegate(n1, 'update:modelValue', () => val => (data.value = val))
setDOMProps(n2, [
['class', 'bar'],
@ -542,7 +547,7 @@ describe('directive: v-model', () => {
['value', 'bar'],
])
withDirectives(n2, [[vModelDynamic, () => data.value]])
on(n2, 'update:modelValue', () => val => (data.value = val))
delegate(n2, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -598,7 +603,7 @@ describe('directive: v-model', () => {
['value', 'foo'],
])
withDirectives(n1, [[vModelDynamic, () => data.value]])
on(n1, 'update:modelValue', () => val => (data.value = val))
delegate(n1, 'update:modelValue', () => val => (data.value = val))
setDOMProps(n2, [
['class', 'bar'],
@ -606,7 +611,7 @@ describe('directive: v-model', () => {
['value', 'bar'],
])
withDirectives(n2, [[vModelDynamic, () => data.value]])
on(n2, 'update:modelValue', () => val => (data.value = val))
delegate(n2, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -651,7 +656,7 @@ describe('directive: v-model', () => {
setDOMProp(n0, 'value', null)
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -701,7 +706,7 @@ describe('directive: v-model', () => {
['multiple', true],
])
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -755,7 +760,7 @@ describe('directive: v-model', () => {
withDirectives(n0, [
[vModelDynamic, () => data.value, '', { number: true }],
])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -785,7 +790,7 @@ describe('directive: v-model', () => {
withDirectives(n0, [
[vModelDynamic, () => data.value, '', { number: true }],
])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -845,7 +850,7 @@ describe('directive: v-model', () => {
withDirectives(n0, [
[vModelDynamic, () => data.value, '', { number: true }],
])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -913,7 +918,7 @@ describe('directive: v-model', () => {
['multiple', true],
])
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -976,7 +981,7 @@ describe('directive: v-model', () => {
withDirectives(n0, [
[vModelDynamic, () => data.value, '', { number: true }],
])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()
@ -1026,7 +1031,7 @@ describe('directive: v-model', () => {
const t0 = template('<input />')
const n0 = t0() as HTMLInputElement
withDirectives(n0, [[vModelDynamic, () => data.value]])
on(n0, 'update:modelValue', () => val => (data.value = val))
delegate(n0, 'update:modelValue', () => val => (data.value = val))
return n0
}).render()

View File

@ -30,7 +30,6 @@ export function on(
ModifierOptions & { effect?: boolean } = {},
) {
const handler: DelegatedHandler = eventHandler(handlerGetter, options)
const cleanupMetadata = recordEventMetadata(el, event, handler)
let cleanupEvent: (() => void) | undefined
queuePostRenderEffect(() => {
cleanupEvent = addEventListener(el, event, handler, options)
@ -43,7 +42,6 @@ export function on(
}
function cleanup() {
cleanupMetadata()
cleanupEvent && cleanupEvent()
}
}