search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
45.65k stars 8k forks source link

Vue diff component component execution mounted order problem #10675

Open FreeLiC opened 2 months ago

FreeLiC commented 2 months ago

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqVU9Fu0zAU/RXLQkoqStp1PJW0Iqv2AA8wsb1htGXpbefVsSPb6VpFeeGFb0J8D+I3uDdJSyamCVJVsu+51z7n3uOKJ0URbUvgUx57yAuVepgLzfCLb0vvjWZvMyWzzUzwu1QvFSxoJ/j819fvP7/9iEdt1qEmYdtXK2MxW+JxTGqmpPOCs+kG9l00wiVFVHoL6hBrNnhsPErwrHjUIxO7zMrCMwe+LJhK9RqLvMNkoWVeGOtZwlbW5CyIRgmpCd4ckcrCqu5QQoTOjHa+ocVmDNHwc8u9YshryoKTYIiXIBtcJwGrh4/hSQ8++xs+7cELhIX+MkA29Gsv7nUR7w8HbDZnVXsGCrySOZjSh4/i9BHfaJuqErBKwwNLrE334WQ8iFZSqTAIBlGeFmF4PcSuL2HXHBB2tJoIe8lOxuMjvZsXVS9c37B6QEzpsnpIoTFta/zHo3YC2G+aht8rYC4zBSwP01DgaB6YSCDm8SFOCAWv5Dq6d0ajvxoxgmcmL6QC+7HwEhsi+PQgU/BUKfPwvol5W0LXWqy5g2zzRPze7Sgm+IUFB3YLgh8xn9o1oPMIPr/8ADtcH8HcLEuF2c+An8AZVRLHNu2spLnZXl7D9l1jM6nXV+5850G7gygiSpmtQQRH8y2ekf6H7mn0uqnD3mMXGz8/9TqXcjuvqnaYrK7jEQX+4+W0biysKRw6agkrqeGCdmHHqbPJpbeoDsm0NqYyoyBSZh02xe3LJbBnk38xCYq73oKlhqE+VB1NTnj9G5n6fA4=

Steps to reproduce

Open the console and click the button. You will find that the log is printed from back to front. 119-->100

What is expected?

The expectation is that the life cycle is executed from front to back，100->119

What is actually happening?

the log is printed from back to front. 119-->100

System Info

No response

Any additional comments?

No response

FreeLiC commented 2 months ago

v-for must need add key

Doctor-wu commented 2 months ago

In fact, they will be mounted in the same tick, I am curious what's the problem in the real-world use.

FreeLiC commented 2 months ago

In fact, they will be mounted in the same tick, I am curious what's the problem in the real-world use.

For example: In some business logic, I need to record the sequence of v-for loop update triggers in the component mounted life cycle into an array, and use subscripts to get the sequence to meet some business logic requirements, but I found that The life cycle of the Vue diff trigger component is from back to front, which causes the order of my records to be reversed. There is another situation where such a problem may exist. The components at the same level are executed asynchronously and sequentially (although these business logics can be avoided by technical means), which will also cause problems.