Weekly Vue News #111 - Deep Watch on Arrays

Weekly Vue News #111

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

Vue Tip: Deep Watch on Arrays

In Vue 3, when using the watch option to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback is not triggered on array mutation.

Let's take a look at an example:

App.vue

            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:

App.vue

            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:

⚡ Open Demo

Quote of the week

Curated Vue & Nuxt Content

📕 Faster Vue.js Execution in Firefox

👉🏻 Mozilla says: "Over the course of the year Firefox has improved by around 40% on the Vue.js benchmark" – find out why.

hacks.mozilla.org

📕 The Anatomy of a Vue 3 Component

👉🏻 This article explains the main ingredients of a Vue 3 component using Composition API and Script Setup.

fadamakis.com

📕 Building accessible forms in Vue with FormKit

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

dev.to

📕 Pinia Unlocked: Vue School's Ultimate Learning Resources

👉🏻 Vue School has published a helpful guide to Pinia.

👉🏻 It incudes all these learning resources to help you become a Pinia expert.

vueschool.io

📹 Vue.js Tutorial: Beginner to Front-End Developer

👉🏻 A comprehensive, 4-hour course will teach you the fundamental concepts you need to start building applications with Vue 3.

www.youtube.com

🎧 Daniel Roe - Nuxt, unJS

👉🏻 Podcast with Daniel Roe about his journey from law to design to development and how he ended up leading the Nuxt core team.

www.devtools.fm

🎧 Wut's Nuxt for Nuxt.js?

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

webrush.io