#title Weekly Vue News #80 - Destructure Props in Composition API Without Losing Reactivity #preview Ready for your weekly Vue & Nuxt dose?
Destructure Props in Composition API Without Losing Reactivity
Hi ๐
๐ฅณ We reached more than 800 subscribers in this newsletter. Only 200 left for the next big milestone. ๐ฅณ
Last week, I worked a lot on
I'm planning to try launching CodeSnap.dev on
You can now watch my Vue.js Nation 2023 lightning talk
Have a nice week โ๏ธ
To support me:
- ๐ Recommend the newsletter to your friends: it really helps!
- ๐ธ Sponsor the newsletter
- ๐งต Retweet the latest Twitter thread
- ๐จ Reply to this email: feedback is welcome
Inside <script setup>
we use the defineProps()
compiler macro to access props:
1 <script setup lang="ts">
2 const props = defineProps<{ count: number }>()
3 </script>
defineProps
is a compiler macro and does not need to be imported.
As we all love destructuring objects in JavaScript you might want to try to destructure the props object:
1 <script setup lang="ts">
2 const { count } = defineProps<{ count: number }>()
3 </script>
When you destructure the props
object the reactivity is lost.
By destructuring the props
object, the count
variable becomes a primitive value (in our case of type number
) and is no longer a ref
or reactive
object.
You can try it yourself in the following StackBlitz demo. Click the "Increment" button multiple times and you will see that the double count value is not updated and always shows 0
:
The simplest solution is to access props as props.count
in order to retain reactivity:
1 <script setup lang="ts">
2 import { computed } from 'vue'
3
4 const props = defineProps<{ count: number }>()
5 const doubleCount = computed(() => props.count * 2)
6 </script>
7
8 <template>Double Count: {{ doubleCount }}</template>
Try it yourself, now the double count is correctly increased if the "Increment" button is clicked:
If you cannot live without destructuring Vue provides a special helper
1 <script setup lang="ts">
2 import { computed, toRefs } from 'vue'
3
4 const props = defineProps<{ count: number }>()
5
6 const { count } = toRefs(props)
7
8 const doubleCount = computed(() => count.value * 2)
9 </script>
10
11 <template>Double Count: {{ doubleCount }}</template>
toRefs(props)
a reactive object (in this example props
) to a plain object where each property of the resulting object is a ref
pointing to the corresponding property of the original object. We need to use count.value
inside the computed
property, as it is a ref
.
Here's the StackBlitz demo for toRefs
:
๐๐ป Houssein introduces Faceioโs Facial recognition authentication. |
๐๐ป He is building a simple app to showcase the way to integrate it in a Vue application. |
๐๐ป Anthony presents a solution using the HTML template pre-processor Pug in Vue.
medium.comEvan You built solid style signals in Vue in ~10 lines
sfc.vuejs.org๐๐ป Made with Vue 3
realpokedex.com๐๐ป This extensive document provides plain JavaScript alternatives to almost 100 different functions youโd find in popular utility libraries like Lodash and Underscore.
github.com๐๐ป Rik Schennink explains in this article how to compress images with JavaScript and save them back to the file input ready for upload.
pqina.nl๐๐ป "Rather than writing a whole smattering of tests and then coding until they all pass, TLD (Test Led Development) focuses on ping-ponging between test and code."
matthewc.dev๐๐ป Without Steam, third-party servers and complex registrations, you can remember your youth and play Counter-Strike 1.6 literally from any computer with Internet access.
play-cs.com๐๐ป Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages for easier identification of the purpose of a commit.
github.com๐๐ป Trigger.dev is a developer-first Zapier alternative. |
๐๐ป It makes it easy for developers to create event-driven background tasks. |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany