DEV Community

Enjoy the Vue

Episode 53: New in Vue 3: Watch & watchEffect with Alex Riviere

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:

Episode source