Episode 53: New in Vue 3: Watch & watchEffect with Alex Riviere
Watch and watchEffect have very particular purposes in Vue.js. Despite their subtle evolution between Vue 2 and Vue 3, both share valuable uses in composition API. Today we speak with special guest Alex Riviere to talk about watch and watchEffect, their respective nuances, and why, although useful, they may not be the answer to your problems. We start off by hearing about the uses of watchers in Vue 2 before unpacking watchEffect in more detail. A theme throughout the episode, Alex shares a range of caveats to watch and watchEffect, touching on JavaScript, cached values, and contrasts between value to functions and reference to functions. After recapping the main differences between watch and watchEffect, Alex defines what side effects you can face before explaining what he feels is helpful about current docs on watch and watchEffect. Toward the end of the show, Alex boils watch and watchEffect down to a very simple metaphor, and to conclude, we go through this week’s top picks. Join us to find out about the best in Vue!
Key Points From This Episode:
- Introducing today’s host, Tessa!
- We welcome a special guest, Alex Riviere.
- Alex tells listeners a little more about himself.
- Alex breaks down watch and watchEffect.
- Examples of why we use watchers in Vue 2.
- Alex answers: what is watchEffect?
- How watch on Vue 3 differs to its Vue 2 version.
- The caveat to having one function for all.
- Recapping the main difference between watch and watchEffect.
- Alex defines what side effects you might face.
- What Alex finds helpful about the current docs on watch and watchEffect.
- We talk about de-bounce search and our experiences with it.
- Alex gives listeners a useful metaphor for watch and watchEffect.
- We share our weekly picks!
Tweetables:
- “In Vue 3 we have watch and watchEffect in the composition API.” — @fimion [0:02:02]
- “With the composition API, you can now import from Vue watch or watchEffect. WatchEffect allows you to define a function that accesses some reactive value.” — @fimion [0:03:43]
- “So when we're passing complex objects to the watch function, it doesn't immediately want to be able to show you the old version and the new version. We kind of got to do some stuff to it.” — @fimion [0:08:45]
- “Sometimes watch is not the correct answer. It's a very powerful tool. It can do a lot of really good and cool things. May not always be the correct answer, however.” — @fimion [0:23:04]
Links Mentioned in Today’s Episode: