Initial Method
const list = reactive([1, 2, 3, 4, 5]);
const clickHandler = () =>{
list.push(...[11, 12, 13, 14, 15]);
list.push(...[16, 17, 18, 19, 20]);
Promise.resolve().then(() => {
list.push(33)
});
};
Alternative Method
const list = reactive([1, 2, 3, 4, 5]);
const clickHandler = ()=>{
Promise.resolve().then(() => {
list.push(33)
});
list.push(...[11, 12, 13, 14, 15]);
list.push(...[16, 17, 18, 19, 20]);
};
The first approach results in two triggers of vue hooks onUpdated, while the second only triggers once. Can anyone explain why this difference occurs? Thank you.