Subscribe on changes!

使用v-if渲染的组件内部watch受到其他v-show组件逻辑影响,导致watch触发行为异常

avatar
Dec 6th 2023

Vue version

3.3.10

Link to minimal reproduction

https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fsqlyr%2Fvue-watch

Steps to reproduce

1、点击显示按钮 2、点击隐藏按钮 3、查看控制台输出 image

What is expected?

此处watch不触发

What is actually happening?

watch会错误触发 且使用注释中的写法不会触发该错误 image

System Info

No response

Any additional comments?

No response

avatar
Dec 6th 2023
avatar
Dec 7th 2023

playground

tanks

avatar
Dec 7th 2023

This is expected behavior, because watchers by default fire before render updates: https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing

If you don't want it to fire, use a post-flush watcher.

avatar
Dec 7th 2023

This is expected behavior, because watchers by default fire before render updates: https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing

If you don't want it to fire, use a post-flush watcher.

In the example code, Is inconsistent performance between using and not using v-show an expected behavior?

avatar
Dec 8th 2023

Closing as duplicate of #7030