Subscribe on changes!

Callbacks for watching multiple props sources differ from wrapped callbacks in components

avatar
Jun 2nd 2023

Vue version

^3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-izrti9?file=src%2FApp.vue

Steps to reproduce

Go to reproduction. And make code like this.

// in App.vue
-  <CompB :foo="model.foo" :bar="model.bar" />
+ <CompWrapper>
+   <CompB :foo="model.foo" :bar="model.bar" />
+  </CompWrapper>

And change input value

What is expected?

Change input value once to callback console.log('CompB props changed') twice in CompB.vue. It should not behave differently when make code like this.

// in App.vue
+  <CompB :foo="model.foo" :bar="model.bar" />
- <CompWrapper>
-   <CompB :foo="model.foo" :bar="model.bar" />
-  </CompWrapper>

What is actually happening?

Change input value once to callback console.log('CompB props changed') once in CompB.vue. In other words,the number of watch callbacks is consistent with the watch([() => model.foo, () => model.bar] in App.vue

System Info

No response

Any additional comments?

No response