In Vue 3, v-for
the directive's array update behavior has been upgraded. In Vue 2, when v-for
rendering an array with a , Vue cannot detect changes if the following operations are performed on the array:
- Modify array elements directly by index, for example
arr[0] = newValue
- Modify the length of the array, for example
arr.length = 0
In Vue 3, these operations will be considered reactive, that is, Vue will be able to detect changes to the array. This is because Vue 3 uses Proxy to implement a responsive system, which can better track changes in the array.
Therefore, in Vue 3, you can perform the above operations on arrays directly without using the special methods provided by Vue (such as $set
or splice
) to trigger reactive updates. This is a major upgrade for Vue 3 when it comes to arrays.
Tool collection: https://aiburgeon.com/siteCollection/