Weekly Vue News #136 - Computed Caching vs. Methods

Weekly Vue News #136 Computed Caching vs. Methods View online Hi 👋 This week's newsletter comes with no groundbreaking news, but just a heartfelt reminder that we're inching closer to my next big milestone of 3000 subscribers. Let's keep the Vue & Nuxt love flowing! Have a nice week ☀️ Vue 📕 Design Patterns for Vue.js 👉🏻 A great book by Lachlan to arm you with the tools, patterns and concepts to build complex, scalable and testable Vue applications. 📕 Handling Environment Variables in Vue 👉🏻 In this article, Fotis explains how you can handle environment variables in your Vue.js project. 📹 Vue Fortified: Best Practices for Web App Security 👉🏻 Join Ramona for a concise, practical session on fortifying your Vue apps against security threats and implementing best practices. 🛠️ vue0 👉🏻 An open Source alternative for v0. 👉🏻 Generate usable Vue.js component, not just UI. 👉🏻 Support `shadcn/vue` for now. Sponsored 48 Hours to get hands-on with Vue: FREE WEEKEND starts March 23rd! Vue School's legendary Free Weekend is back, and it'll be hitting your screens for 48 hours only from 23 - 24 March 2024. They make all 1,100+ lessons and 58 courses available to you for FREE. 👉 Reserve your spot Nuxt 📕 E2E Typesafety in Nuxt Fullstack Application 👉🏻 This article by Cody will walk you through how to implement E2E type safety using Nuxt 3's built-in client/server relationships. 📕 Improve Build Performance of Nuxt 👉🏻 Jakub explains how you can greatly reduce the build time of your Nuxt app. 📹 Using aliases with Nuxt 👉🏻 A quick dive into Nuxt aliases and how they work. 🛠️ Nuxt Fonts 👉🏻 Plug-and-play web font optimization and configuration for Nuxt apps. 📅 Events 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: Computed Caching vs. Methods Vue recommends to use computed properties instead of methods, if you want to cache the result. Let's take a look at an example using a method invocation: 1<script setup lang="ts"> 2import { ref, computed } from 'vue' 3 4const items = ref(['Item 1','Item 2','Item 3']) 5 6const getItemsMessage = () => { 7 return author.books.length > 0 ? 'Has items' : 'Has no items' 8} 9</script> 10 11<template> 12 <span>{{ getItemsMessage() }}</span> 13</template> Let's take at the same code using a computed property: 1<script setup lang="ts"> 2import { ref, computed } from 'vue' 3 4const items = ref(['Item 1','Item 2','Item 3']) 5 6const itemsMessage = computed(() => { 7 return author.books.length > 0 ? 'Has items' : 'Has no items' 8}) 9</script> 10 11<template> 12 <span>{{ itemsMessage }}</span> 13</template> Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. In comparison, a method invocation will always run the function whenever a re-render happens. Why do we need caching? Imagine we have an expensive computed property, which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on list. Without caching, we would be executing list's getter many more times than necessary! In cases where you do not want caching, use a method call instead. 😂 Fun 🧑🏻‍💻 In Other News 📕 JavaScript Bloat in 2024 👉🏻 In 2024, JavaScript bundles on modern websites are much bigger than they need to be, even for simple functionalities. 📕 Package dependency hell 👉🏻 There are parallels between the struggles of dependency management in software development and the imposed societal expectations that often lead to burnout in life. 📕 How to set up a Node server with TypeScript in 2024 👉🏻 A quick tutorial on how to set up a Node project in 2024. 👉🏻 Includes TypeScript, live reload, and environment variable support. 📕 Using localStorage in Modern Applications 👉🏻 This article explores the various aspects of the localStorage API, its advantages and limitations, and alternative storage options available for modern applications. 🛠️ Puter 👉🏻 An open-source desktop environment that runs in a web browser. 👉🏻 It can be used to create remote desktop environments and serve as an interface for various services, including cloud storage, remote servers, and web hosting platforms. Comments? Join the discussion about this issue here. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany