push on reactive array calls onUpdate hook on all child components in v-for list
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
hello, can someone tell me why when adding an element to an array in v-for, onUpdated is called for ALL children? it shouldn't be like this, :key is unique for everyone in the sheet, dom should not be updated, elements are added to the array via .push
at the same time, if you write on the options api, then the hook is not called (in the documentation they are the same updated() and onUpdated() )
What is expected?
onUpdated hook should not be called on child components
What is actually happening?
onUpdated hook is called on all child components in the list after changing array's length
System Info
No response
Any additional comments?
No response
Due to the update in todos, the elements are being re-rendered, and TodoItem relies on todos.
Due to the update in
todos, the elements are being re-rendered, andTodoItemrelies ontodos.
Hello, thank you for your assistance, but why "updated" hook in options api is not called ? and do you know how to avoid re-render on all child components in computed lists, because they can be really big ?
It's called with Options API as well, see here.
The problem is that your child component did not define the remove event, so Vue treats it as a native event passed with attrs to the child, and as its an inline listener, it means a new function is passed down each time - so the child needs to re-render each time in order to apply the new remove listener to the root element.
If you properly declare the component event, no re-renders happen, see here
<script setup>
import { onUpdated } from 'vue'
defineEmits(['remove'])
onUpdated(() => {
// no longer will be called.
console.log('component updated')
})
</script>
see here
very very thank You! I need to delve deeper into real project in order to eliminate such problems
if anyone could explain how to avoid re-rendering in this example, i would really appreciate it, thanks!