#title Weekly Vue News #111 - Deep Watch on Arrays #preview Ready for your weekly Vue & Nuxt dose?
Deep Watch on Arrays
Hi 👋
I have to apologize for sending last week's issue three times. I'm sorry about that. I hope you still enjoyed the content.
I updated the Node version of my serverless functions that send the emails which somehow broke one of the functions. By manually triggering the function it somehow was executed three times. To address that issue I did a large refactoring on the serverless code and now it should be much more robust.
Anyways, I also have some good news: I reached another milestone for this newsletter, it now has 2000+ subscribers! 🎉 Thank you so much for your support!
Have a lovely 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
In Vue 3, when using the
Let's take a look at an example:
1 <script setup lang="ts">
2 import { ref, watch } from 'vue'
3
4 const users = ref([
5 { id: 1, name: 'Mike' },
6 { id: 2, name: 'Flo' },
7 { id: 3, name: 'Chris' },
8 ])
9
10 const addUser = () => {
11 users.value.push({ id: 4, name: 'New' })
12 }
13
14 watch(users, (newUsers) => {
15 console.log('New users', newUsers)
16 })
17 </script>
18
19 <template>
20 <button @click="addUser">Add user</button>
21 <ul>
22 <li v-for="user of users" :key="user.id">
23 {{ user.name }}
24 </li>
25 </ul>
26 </template>
We have an array of users and a button to add a new user. When we click the button, the user is added to the array but the watch callback is not triggered.
To trigger the watcher on mutation, the deep option must be specified:
1 <script setup lang="ts">
2 watch(
3 users,
4 (newUsers) => {
5 console.log('New users', newUsers)
6 },
7 { deep: true }
8 )
9 </script>
Now, when we click the button, the watch callback is triggered and the new user is logged to the console.
Try it yourself in the following StackBlitz project:
| 👉🏻 Mozilla says: "Over the course of the year Firefox has improved by around 40% on the Vue.js benchmark" – find out why. |
| 👉🏻 This article explains the main ingredients of a Vue 3 component using Composition API and Script Setup. |
| 👉🏻 Building forms is not easy but FormKit is here to help. |
| 👉🏻 It's a form building framework where all the form logic is delivered by FormKit. |
| 👉🏻 Vue School has published a helpful guide to Pinia. |
| 👉🏻 It incudes all these learning resources to help you become a Pinia expert. |
| 👉🏻 A comprehensive, 4-hour course will teach you the fundamental concepts you need to start building applications with Vue 3. |
| 👉🏻 Podcast with Daniel Roe about his journey from law to design to development and how he ended up leading the Nuxt core team. |
| 👉🏻 Podcast with Alexander Lichter where he talks about what Nuxt is, how Nuxt helps developers, a conversation around server side rendering, how it's different than PHP, and what's exciting about Nuxt. |
| 👉🏻 View Transitions API is fantastic addition to freshly introduced web APIs. |
| 👉🏻 Novuel is an open-source AI writing application built with Nuxt 3, Nuxt UI, and Novel Vue. |
| 👉🏻 Crafting effective prompts is an (sometimes frustrating) art. |
| 👉🏻 Learn more tips for getting the output you want. |
| 👉🏻 This article goes through static analysis tools and the benefits of static analysis regarding code durability. |
| 👉🏻 An increasingly popular, turbo-charged site generator. |
| 👉🏻 You can use it with React, Vue, Svelte, Solid, and others. |
| 👉🏻 A Swiss Army knife for developers. |
| 👉🏻 DevToys helps with daily development tasks like formatting JSON, comparing text, and testing RegExp. |
| 👉🏻 RecipeUI is an open-source Postman alternative with type safety built-in. |
| 👉🏻 It helps you catch your API requests with TypeScript and autocomplete before they fail. |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
