Version

3.0.11

Reproduction link

SFC Playground

https://codesandbox.io/s/jovial-cohen-docbu?file=/src/App.vue (readonly)

Steps to reproduce

Just open link is fine

What is expected?

Expect the input box in a timely response when I input

What is actually happening?

The input box stucking

The scenario code like this:

template:
<h2>{{ arr[0] }}</h2>
<input type="text" @keyup="keyup">

script:
reactive => arr: [...Array(100000).keys()]

keyup => arr.unshift(Math.random())

ps: BTW，vue2 doesn't appear this problem。

As a workaround, you can create a new array instead of modifying the original array:

const keyup = () => {
  const newArr = state.arr.slice()
  newArr.unshift(Math.random())
  state.arr = newArr
}

Hint.

When calling unshift/shift/splice, etc., these methods will manipulate the original array. In the worst case, that will call the set trap for the array integer key n times, n represents the number of array elements, which is a time-consuming operation.

Hint.

When calling unshift/shift/splice, etc., these methods will manipulate the original array. In the worst case, that will call the set trap for the array integer key n times, n represents the number of array elements, which is a time-consuming operation.

Thanks for your comment, this issue brings me to a deeper question, which is that if Vue2 doesn't monitoring array elements because unshift/shift/splice & for triggers defindProperty method: getter/setter and leads to high performance cost, then Vue3 Proxy seems to have the same problem. Is there any idea to solve this problem?

Calling shift/unshift...on the proxy array is an extremely performance-consuming operation https://jsbench.me/n5knjtmjlz/1