[2.7.10] Unexpected behavior of watcher callback triggered with composition API

This issue has been created since 2022-09-28.

Version

2.7.10

Reproduction link

stackblitz.com

Steps to reproduce

click "change id" button, watch( ()=> props.obj, cb ) callback was triggered even props.obj not change anything

App.vue

<script setup>
import { ref } from 'vue'
import MyComponent from './components/MyComponent.vue'

const id = ref(1)
function toggle() {
  if (id.value === 1) {
    id.value = 2
  } else {
    id.value = 1
  }
}
</script>

<template>
<button @click="toggle"> Change Id </button>
<MyComponent :obj="{ key: 'test' }" />
</template>

MyComponent.vue

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  obj: {
    type: Object,
    default: () => ({}),
  },
})

const count = ref(0)

// when App.vue change Ref<id>, watch callback also triggered
watch(
  () => props.obj,
  () => {
    console.log('trigger watch...')
    count.value += 1
  }
)

</script>

<template>
<div>
  <p>trigger count: {{ count }}</p>
</div>
<template>

What is expected?

Watcher callback should not trigger

What is actually happening?

Watcher callback triggered even props not change

nooooooom wrote this answer on 2022-09-29

Since your App.vue component's render function subscribes to the id changes, it will re-render when you click to toggle, which will cause { key: 'test' } to be recreated.

You can use a variable to save obj to avoid this.

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-12-10
Star Count 201155
Watcher Count 6070
Fork Count 33134
Issue Count 595

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Just some ideas for making this library better 18 2020-12-10 2022-11-15
missing nominalization 1 2015-09-24 2022-04-03
spurious nomlex-pt relations from search NADAR 0 2015-09-16 2022-04-03
minor bug on search word_pt: blank 1 2015-10-18 2022-07-15
A bug when using Apex DDP 0 2021-04-15 2022-08-31
How I can use -stream_loop parameter in this repo? 0 2021-08-11 2022-11-20
Auto-suggest account-appropriate commodity balance rather than balance of all commodities 3 2021-12-19 2022-09-24
How to Use? 1 2016-07-24 2022-01-12
`crud.field()` js library bugs 8 2022-04-19 2022-11-13
State value to set for "x" has to be type "number" but recevied type "string" 3 2021-05-27 2022-10-10
Feature - plugin system for alternate task executer 0 2021-12-31 2022-12-09
Add caching for provider metadata 0 2020-09-14 2022-02-22
Endless buffering state if player stalls near the end 4 2022-06-24 2022-12-09
OpenAPI Annotation causes BloomRPC to fail loading proto 4 2020-12-07 2022-10-17
A feed for git branch 5 2021-09-05 2022-10-27
能不能做得和PanDownlaod一样的好用?下载速度快,而且可以自动获取下载链接 5 2020-05-17 2022-10-23
Function not well minimized 3 2022-04-19 2022-11-04
Mac: get code signature error 1 2022-06-03 2022-12-02
[Animation] Motion Event PresetsThe motion event after the fourth color is added. Only the motion events of the third color can be displayed. 0 2021-11-29 2022-11-26
Allow customized http request headers in conformance tests 0 2022-01-20 2022-12-08
[New feature required] Compute the Shortest Path 1 2021-06-30 2022-10-25
Audit of active maintainers + call for new maintainers 7 2021-04-05 2022-11-29
[bug]: Handling request to empty url 4 2021-11-22 2022-10-25
The URL for homepage should link to package inside monorepo 1 2022-05-16 2022-12-06
function-definition is not allowed 2 2022-03-14 2022-11-26
rendered Documentation updates 3 2022-10-12 2022-11-10
Move the build documentation to pypa.io 3 2022-03-22 2022-12-08
Implement search for versions 0 2020-07-30 2022-12-01
Click on the "Legal" link that it's over the map, crashes the app 2 2020-12-07 2022-09-11
Add missing classes of section tags 1 2021-11-14 2022-12-08
Deprecation::notice() does not work with 1.x module branches 2 2022-10-18 2022-12-01
Markdown Checklist/Todo-List not hierarchical in Preview 1 2021-07-06 2022-11-24
Failed to handle key=<BS>. Cannot read property 'getViewLineContent' of undefined 0 2021-10-10 2022-10-15
x/vulndb: potential Go vuln in github.com/sylabs/sif: CVE-2022-39237 1 2022-10-06 2022-11-25
[REQUEST] "change to parent directory" keybind in filebrowser modi 3 2021-10-22 2022-11-15
Error on pattern destructuring on readonly structs 2 2020-07-02 2022-12-02
Add new commands or redefine 0 2018-09-16 2022-10-13
turbo intruder doesn't stop when closing it's window 1 2021-10-26 2022-12-01
Mediapipe solutions in C#\.NET 3 2022-03-31 2022-10-14
Add mechanism for wider bit widths in VM imports/change methods/etc...? 6 2022-01-08 2022-12-08
Stats: Hide the authors module 0 2022-10-05 2022-10-07
Stats: Hide the search terms module 0 2022-10-05 2022-10-07
Stats: Remove the legend and the nested visitor bars from the views page 0 2022-10-05 2022-10-07
Deprecating class-validator and class-transformer usage 3 2021-10-20 2022-11-03
[ResponseOps] research collecting more interesting rule metrics 1 2022-02-02 2022-09-12
'dotnet publish' does not publish wwwroot when Blazor project is a dependency 3 2022-10-13 2022-10-17
blazor server signalr JsonReaderException 4 2022-10-13 2022-10-17
[dotnet-sdk-7.0.100-rtm.22510.17] Microsoft.JSInterop.JSException: Converting circular structure to JSON when opening a new tab 2 2022-10-13 2022-10-17
Blazor WebAssembly publish problem 3 2021-11-30 2022-07-12
Pin analyzer version to avoid bad 1.6.0 0 2021-05-25 2022-12-10