Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1、click the move button, tThe left value of the first div tag will increase by 10 to 20. 2、click the add button, will add a div tag with content b.

What is expected?

The left value of the first label should still be 20px.

What is actually happening?

The left value of the first label becomes 10px.

Any additional comments?

I tried to debug the code and created another link.

When I click the change button, the code runs to patchStyle and I find that the values ​​of prev and next are the same, which I think doesn't seem right.

It's working as expected because you were updating the DOM directly, bypassing Vue's component state.

See the fix here.

Yes, I have solved it like this at the moment, but in vue2 the appearance is as I expected. this is a link.

@LinusBorg maybe this should be considered a bug, as it is inconsistent with vue2.🤔

This is working as expected because you are setting :style="{left: item.left}" so the style is set to the correct value when adding a new value. It would be a bug if it behaved differently.

In any case, you are not supposed to directly manipulate the DOM that is being handled by Vue.