View profile

Weekly Vue.js News - #47 - Understand the difference between the watch() and watchEffect() hook

Michael Hoffmann
Michael Hoffmann
Hi 👋
In this issue, I will explain the difference between the watch() and watchEffect() hook in Vue. I’ll also tell you how you can avoid relative path hell in TypeScript.
Additionally, the Nuxt 3 rewrite of my portfolio website is nearly done. I’m still waiting for the stable Nuxt 3 release and Nuxt 3 support of some modules like nuxt/image and nuxt/i18n, before I release the new version.
Have a great week ☀️

Vue Tip: Understand the difference between the watch() and watchEffect() hook
We can use the watch() hook to trigger a callback whenever a piece of reactive state changes. It also enables us to access the previous value of the watched variables.
watch() hook example
watch() hook example
The watchEffect() hook works like the computed() hook or the computed option, but instead of returning a value, you use it to trigger side-effects.
watchEffect() hook example
watchEffect() hook example
watchEffect() might seem superior to watch(), but if you only want to trigger the callback function when one or multiple specific variables change, you must use watch() instead of watchEffect().
Vue News
TypeScript Tip: Avoid relative path hell
Do you like relative paths in your code?
Example for relative component paths
Example for relative component paths
By adding baseUrl and paths in tsconfig.json you can shorten your import paths and get rid of the relative paths:
tsconfig.json example
tsconfig.json example
Which results in much cleaner imports:
Shortened imports
Shortened imports
Web Development News
Quote of the week
Tools & Misc
Did you enjoy this issue? Yes No
Michael Hoffmann
Michael Hoffmann @mokkapps

This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert.

Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3.

Published each Monday since June 2021.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany