Skip to content

Commit

Permalink
perf(v-model): optimize v-model multiple select w/ large lists
Browse files Browse the repository at this point in the history
close #10014
  • Loading branch information
yyx990803 committed Jan 18, 2024
1 parent 75e866b commit 2ffb956
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 9 deletions.
10 changes: 10 additions & 0 deletions packages/runtime-dom/__tests__/directives/vModel.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1037,15 +1037,25 @@ describe('vModel', () => {
await nextTick()
expect(data.value).toMatchObject([fooValue, barValue])

// reset
foo.selected = false
bar.selected = false
triggerEvent('change', input)
await nextTick()
expect(data.value).toMatchObject([])

data.value = [fooValue, barValue]
await nextTick()
expect(foo.selected).toEqual(true)
expect(bar.selected).toEqual(true)

// reset
foo.selected = false
bar.selected = false
triggerEvent('change', input)
await nextTick()
expect(data.value).toMatchObject([])

data.value = [{ foo: 1 }, { bar: 1 }]
await nextTick()
// looseEqual
Expand Down
47 changes: 38 additions & 9 deletions packages/runtime-dom/src/directives/vModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
type DirectiveHook,
type ObjectDirective,
type VNode,
nextTick,
warn,
} from '@vue/runtime-core'
import { addEventListener } from '../modules/events'
Expand Down Expand Up @@ -38,7 +39,9 @@ function onCompositionEnd(e: Event) {

const assignKey = Symbol('_assign')

type ModelDirective<T> = ObjectDirective<T & { [assignKey]: AssignerFn }>
type ModelDirective<T> = ObjectDirective<
T & { [assignKey]: AssignerFn; _assigning?: boolean }
>

// We are exporting the v-model runtime directly as vnode hooks so that it can
// be tree-shaken in case v-model is never used.
Expand Down Expand Up @@ -197,38 +200,64 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
: selectedVal
: selectedVal[0],
)
el._assigning = true
nextTick(() => {
el._assigning = false
})
})
el[assignKey] = getModelAssigner(vnode)
},
// set value in mounted & updated because <select> relies on its children
// <option>s.
mounted(el, { value }) {
setSelected(el, value)
mounted(el, { value, oldValue, modifiers: { number } }) {
setSelected(el, value, oldValue, number)
},
beforeUpdate(el, _binding, vnode) {
el[assignKey] = getModelAssigner(vnode)
},
updated(el, { value }) {
setSelected(el, value)
updated(el, { value, oldValue, modifiers: { number } }) {
if (!el._assigning) {
setSelected(el, value, oldValue, number)
}
},
}

function setSelected(el: HTMLSelectElement, value: any) {
function setSelected(
el: HTMLSelectElement,
value: any,
oldValue: any,
number: boolean,
) {
const isMultiple = el.multiple
if (isMultiple && !isArray(value) && !isSet(value)) {
const isArrayValue = isArray(value)
if (isMultiple && !isArrayValue && !isSet(value)) {
__DEV__ &&
warn(
`<select multiple v-model> expects an Array or Set value for its binding, ` +
`but got ${Object.prototype.toString.call(value).slice(8, -1)}.`,
)
return
}

// fast path for updates triggered by other changes
if (isArrayValue && looseEqual(value, oldValue)) {
return
}

for (let i = 0, l = el.options.length; i < l; i++) {
const option = el.options[i]
const optionValue = getValue(option)
if (isMultiple) {
if (isArray(value)) {
option.selected = looseIndexOf(value, optionValue) > -1
if (isArrayValue) {
const optionType = typeof optionValue
// fast path for string / number values
if (optionType === 'string' || optionType === 'number') {
option.selected = value.includes(
number ? looseToNumber(optionValue) : optionValue,
)
} else {
option.selected = looseIndexOf(value, optionValue) > -1
}
} else {
option.selected = value.has(optionValue)
}
Expand Down

0 comments on commit 2ffb956

Please sign in to comment.