[Vuejs]-Why change data in beforeCreated/created/beforeMount can not trigger watch in VUE?

by

3👍

✅

This is behaving as I would expect. If you consider the life cycle sequence below, on the parent the child components only get created after beforeMount on the parent and before mounted on the parent. So, your watch on the child is not going to fire for changes to the prop made in beforeCreate or created by the parent, because the child does not exist at that point.

  • Parent beforeCreate
  • Parent created
  • Parent beforeMount
    • Child beforeCreate
      • Child watcher will fire here if immediate: true, with the initial value passed
    • Child created
    • Child beforeMount
    • Child mounted
  • Any change to the property here will fire the child watcher from this point
  • Parent mounted

In your watcher, you set the value immediate: false on the watch. That means, it won’t fire when the initial value for the property is set. If you change that to true, you would see the value the parent is setting in beforeMount triggers the watch immediately when the child component gets created. Also, if you changed the value again in the parent mounted life cycle hook, the watcher in the child will pick that up no matter the value for immediate.

👤steve16351

Leave a comment