Jun 27, 2022

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

Michael Hoffmann (Mokkapps)

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).

medium.com

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

medium.com

🛠️ 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/

github.com

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

www.youtube.com

❓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

mr-unity-buddy.hashnode.dev

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.

github.blog

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…”

blog.izs.me

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.

3dicons.co

🛠️ 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.

github.com

Did you enjoy this issue? Yes No

Michael Hoffmann (Mokkapps) @mokkapps

Hi 👋

My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.

I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice.

My weekly emails reflect this preference.

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