Vue: Vue doesn't call watcher when you change prop in beforeDestroy

Created on 23 May 2018 · 3Comments · Source: vuejs/vue

Version

2.5.16

Reproduction link

https://jsfiddle.net/86s8qufj/

Steps to reproduce

Open reproduction link
Open console
Click to button "Toggle TestComponent".
This create TestComponent for you.
Try to change something in input. You can see 'In testInfo watcher' in console, which means testInfo watcher have called.
Click to button "Toggle TestComponent" again.
This destroy TestComponent.
In beforeDestroy hook I change 'testInfo' property.
But you can see only 'In beforeDestroy' in console instead of 'In beforeDestroy' and 'In testInfo watcher'.

What is expected?

I expect that watcher for 'testInfo' property will be called when I change it in beforeDestory hook.

What is actually happening?

I change 'testInfo' property in beforeDestroy hook, but watcher doesn't called.

Source

AndreasCag

Most helpful comment

I would say it would be nice to mention it in documentation - cause now there is "Called right before a Vue instance is destroyed. At this stage the instance is still fully functional."

senyaak on 23 May 2018

👍4

All 3 comments

Also if you try to log testInfo in destroyed hook - you will see new value. But the Object should be destroyed....

senyaak on 23 May 2018

beforeDestroy happens right before tearing down the Vue instance, so it's normal for watchers not to trigger as they would trigger once the instance is destroyed (making most watcher functions invalid).
You should call the watcher yourself in the beforeDestroy hook instead of changing data

posva on 23 May 2018

I would say it would be nice to mention it in documentation - cause now there is "Called right before a Vue instance is destroyed. At this stage the instance is still fully functional."

senyaak on 23 May 2018

👍4

Was this page helpful?

0 / 5 - 0 ratings