Weekly Vue.js News - #47 - Understand the difference between the watch() and watchEffect() hook
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
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() 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
New Nuxt 3 Feature: Incremental Static Generation
In this article, Andy goes through the pros and cons of Server Side Rendering (SSR), Static Site Generation (SSG), and a hybrid mode called Incremental Static Generation (ISG).
The most famous companies that currently use Vue.js in 2022
👉🏻 "Vue.js is a mature, powerful framework that has already been chosen by a great number of leading online platforms in various categories"
👉🏻 For example: Alibaba Group, Zoom and GitLab
🛠️ UnoCSS: The instant on-demand Atomic CSS engine.
👉🏻 It was created by @antfu7, who’s a member of the Vue, Nuxt, and Vite Core Teams.
👉🏻 Checkout the cool, interactive docs as well: https://uno.antfu.me/
TypeScript Tip: Avoid relative path hell
Do you like relative paths in your code?
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
Which results in much cleaner imports:
Shortened imports
Web Development News
😆 You can now make games in Microsoft Word with JavaScript
It's made possible by Office Add-ins. a mechanism for scripting Office apps with JavaScript
❓What's the difference between a programmer & a developer?
👉🏻 A developer is involved in the full project scope whereas a programmer is generally limited to coding
GitHub Achievements: recognizing the many stages of a developer’s coding journey
GitHub is introducing the idea of Achievements where you earn badges for achieving as yet undefined goals.
Isaac shares his favorite npm commit:
"Since setting file timestamps to an arbitrary date in the past is, in a way, a form of time travel, we did this instead..."
Quote of the week
Tools & Misc
👉🏻 This site contains a collection of more than 120 open-source 3D icons that are 100% free for commercial and personal use.
👉🏻 The icons come in four predefined color styles and three camera angles.
👉🏻 Take image snapshots of your app within a test and compare them against a baseline.
👉🏻 It can even handle tolerances if you want to ignore subtle changes and only throw on huge discrepancies.
