Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

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

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

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:

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.

My Favorite npm Commit

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

🛠️ 3D Icons

👉🏻 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.

🛠️ Jest Image Snapshot

👉🏻 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.

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 All rights reserved.