Weekly Vue News

By Michael Hoffmann

Weekly Vue News - #64 - Reactivity Transform





Subscribe to our newsletter

By subscribing, you agree with Revueโ€™s Terms of Service and Privacy Policy and understand that Weekly Vue News will receive your email address.

Michael Hoffmann
Michael Hoffmann
Hi ๐Ÿ‘‹
Last week published a new blog post about a polite newsletter signup that I have developed for my portfolio website based on Nuxt 3.
This week is quite busy and Iโ€™ll not be able to work on cool stuff ๐Ÿซ 
Have a great week โ˜€๏ธ

Vue Tip: Reactivity Transform
โš ๏ธ Reactivity Transform is currently an experimental feature. It is disabled by default and requires explicit opt-in. It may also change before being finalized.
โ„น๏ธ Reactivity Transform is a Composition-API-specific feature and requires a build step.
One of the most confusing concepts in Vue 3 is the use of refs vs. reactive objects. Itโ€™s easy to lose reactivity when destructuring reactive objects, while it can be cumbersome to use .value everywhere when using refs. Also, .value is easy to miss if not using a type system.
Vue Reactivity Transform is a new experimental compile-time transform that allows us to write code like this:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
We no longer need to use .value. In fact, this makes our JS/TS code work the same way as in Vue templates where root-level refs are automatically unwrapped.
Every reactivity API that returns refs will have a $-prefixed macro equivalent. These APIs include:
  • ref -> $ref
  • computed -> $computed
  • shallowRef -> $shallowRef
  • customRef -> $customRef
  • toRef -> $toRef
The RFC defines some more compiler-macros:
  • Destructure objects or convert existing refs to reactive variables with $()
  • Destructuring defineProps() in <script setup> also creates reactive variables.
  • Retrieve the underlying refs from reactive variables with $$()
Read more about Reactivity Transform in the RFC.
Curated Vue Content
JavaScript Tip: Function that throws an error if a required parameter is missing
Sometimes we need to ensure that a required parameter has been provided. This can be achieved by using default function parameters.
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.
We can take the advantages of this ES6 feature and make a function which throws an error and assign it as default value for required parameters. So when no parameter is passed this function will be called and it will thrown an error.
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Curated Web Development Content
Quote of the Week
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