Watchers | Vue.js

Tags

Top Highlights

• Do note that you can't watch a property of a reactive object

• Instead, use a getter

• When you call watch() directly on a reactive object, it will implicitly create a deep watcher - the callback will be triggered on all nested mutations

• the callback will only fire if the getter returns a different object

• You can, however, force the second case into a deep watcher by explicitly using the deep option:

• { deep: true }

• watch vs. watchEffect# watch and watchEffect both allow us to reactively perform side effects. Their main difference is the way they track their reactive dependencies: watch only tracks the explicitly watched source. It won't track anything accessed inside the callback. In addition, the callback only triggers when the source has actually changed. watch separates dependency tracking from the side effect, giving us more precise control over when the callback should fire. watchEffect, on the other hand, combines dependency tracking and side effect into one phase. It automatically tracks every reactive property accessed during its synchronous execution. This is more convenient and typically results in terser code, but makes its reactive dependencies less explicit.

• Callback Flush Timing# When you mutate reactive state, it may trigger both Vue component updates and watcher callbacks created by you. By default, user-created watcher callbacks are called before Vue component updates. This means if you attempt to access the DOM inside a watcher callback, the DOM will be in the state before Vue has applied any updates. If you want to access the DOM in a watcher callback after Vue has updated it, you need to specify the flush: 'post' option:

• The key here is that the watcher must be created synchronously: if the watcher is created in an async callback, it won't be bound to the owner component and must be stopped manually to avoid memory leaks.

• To manually stop a watcher, use the returned handle function

• unwatch()

• Note that there should be very few cases where you need to create watchers asynchronously, and synchronous creation should be preferred whenever possible. If you need to wait for some async data, you can make your watch logic conditional instead

• Computed properties allow us to declaratively compute derived values

• However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation.

• Do note that you can't watch a property of a reactive object like this:

• // Note: `newValue` will be equal to `oldValue` here // because they both point to the same object!

• { immediate: true }

• only properties accessed before the first await tick will be tracked.

• By default, user-created watcher callbacks are called before Vue component updates.

• flush: 'post'