Weekly Vue News #134 - Don't Use Reactive Object for Template Refs

Weekly Vue News #134 Don't Use Reactive Object for Template Refs View online Hi 👋 This week is the Vue.js Amsterdam conference, and it will be my first time participating. I'm excited to hear great talks and meet people from the community. Have a nice week ☀️ Vue 📕 3 Kinds of Props in Vue In this article, Michael Thiessen explains the three types of props: 👉🏻 Template Props 👉🏻 Configuration Props 👉🏻 State Props (or Data Props). 📕 Exploring Vue 3 Lifecycle Hooks: A Hands-On Guide with Real-Time Examples 👉🏻 This blog post, unravels the intricacies of Vue 3 lifecycle hooks, accompanied by a real-time example that will shed light on their practical application. 📕 Exploring Component Testing in Vue with Playwright 👉🏻 By demonstrating a component with search capability, Maya Shavin will walkthrough a step-by-step guide on how to test a component with the preview Playwright's component testing feature. 📹 Pinia Disasterclass 👉🏻 In this example-driven talk, Eduardo discusses some of the bad practices he has seen in Pinia as well as the good ones that should have been used instead. 🛠️ vueclid 👉🏻 A Vue package to create beautiful, interactive math diagrams. 🛠️ Drag & Drop 👉🏻 A tiny (~4Kb) data-first drag and drop library for React, Vue, and native JavaScript apps by FormKit. Nuxt 📕 Silently Update URL in Nuxt 3 👉🏻 We often need to update a query parameter like ?search=hello?search=hello within our URL without refreshing the page. 👉🏻 Cody Bontecou shows you how to do that using Nuxt 3. 📹 Custom $fetch and Repository Pattern in Nuxt 3 👉🏻 The repository pattern is a popular way to abstract your API calls away and provide a descriptive way to retrieve or send data. 👉🏻 Alexander Lichter explains how to implement this pattern in Nuxt. 📹 Get Started With Nuxt's Runtime Config API 👉🏻 Learn all the basics about the Nuxt runtime config API. 🛠️ Nuxt UI Pro v1.0 is out 👉🏻 50+ Vue components. 👉🏻 Dashboard, SaaS, Docs & Landing templates. 👉🏻 Fully responsive. 👉🏻 Your purchase helps sustain Nuxt OSS development. 📅 Events Vuejs Amsterdam 2024 👉🏻 28 - 29 February 2024, Amsterdam Vue.js Live Conference 👉🏻 25 - 26 April 2024, Online Vueconf US 2024 👉🏻 22 - 24 May 2024, New Orleans, US vuejs.de Conf 👉🏻 8 - 9 October 2024, Bonn, Germany 💬 Quote of the week 🔥 Vue Tip: Don't Use Reactive Object for Template Refs Template Refs are a way to access elements in the DOM from within a Vue component. As the name suggests, you should use a refref to access the element in the template. Let's take a look at a simple example: 1<script setup> 2import { ref } from 'vue' 3 4const input = ref(null) 5</script> 6 7<template> 8 <input ref="input" /> 9</template> The input variable is a refref that holds the reference to the input element, the name must match the template refref value.: But what if you want to use a reactivereactive object to store the reference? This is not recommended, and here's why: 1<script setup> 2import { reactive, watchEffect } from 'vue' 3 4const input = reactive(null) 5 6watchEffect(() => console.log(input)); 7</script> 8 9<template> 10 <input ref="input" /> 11</template> 12 The watcher will log nullnull when the component is first instantiated, but when the component is mounted and the input is created, it will not trigger again. This happens because the input object becomes a new object which breaks reactivity if we use reactivereactive. Read Ref vs. Reactive: What to Choose Using Vue 3 Composition API? to learn more about this topic. If we use refref instead, it will work as expected because only a refref can be reassigned in this way. Try it yourself in the following StackBlitz: ✨ Open Demo 😂 Fun 🧑🏻‍💻 In Other News 📕 How To Center a Div 👉🏻 There are various methods to center a div with CSS, such as by using text-align, flexbox, CSS Grid, and more. 👉🏻 Josh Comeau explains in this article how to pick the best option. 📕 Web Development Is Getting Too Complex, And It May Be Our Fault 👉🏻 Web development becoming easier to over-engineer web applications. 📕 Interaction to Next Paint becomes a Core Web Vital on March 12 👉🏻 Interaction to Next Paint (INP), which is a holistic approach at measuring responsiveness, will officially become a Core Web Vital on March 12, 2024, replacing First Input Delay (FID). 📹 So You Think You Know Git 👉🏻 GitHub co-founder Scott Chacon gave a spirited talk at FOSDEM 2024 digging into many interesting parts of Git. Comments? Join the discussion about this issue here. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany