Optimizing your Vue App Using v-once and v-memo

Vue is like any other tool we use on the web - your mileage will vary depending on how you use it. If you write poorly optimized code, you'll still get a slow website, even if Vue has lots of tricks to try and improve performance. As such, today we'll be looking at how we can optimise performance using two little-known Vue HTML attributes known as v-once and v-memo. Both of these allow us to optimize when a component or component tree is re-rendered.

These two attributes are not actually used very regularly, but they can be super useful in a whole set of different circumstances. In this guide, I hope I'll be able to give you an understanding of what each does so that you can use them on your next Vue project.

v-once in Vue

When a reactive element updates, Vue will update your DOM and any CSS Vue variables accordingly. However, if you know something should only ever be rendered once, you can tell Vue directly so that it will never update that portion of the DOM tree. To do that, we use the magical attribute, v-once. Let's look at an example, where I am using v-once on an <h1> tag:

<script setup>
import { ref } from 'vue'

let message = ref("Hello World")

let updateMessage = () => {
    message.value = 'Goodbye World'
}
</script>

<template>
    <h1 v-once>{{message}}</h1>
    <input :value="message" />
    <button @click="updateMessage">
        Update Message
    </button>
</template>

Here, we have a reactive variable called message set to Hello World, which can be updated on the click of a button to Goodbye World. We are using this message variable in both our h1 header, and as the value of our input.

Although clicking the button will update the value of the input - the h1 will still have the old Hello World text, since it has the attribute v-once. Essentially, the h1 only gets rendered once and never updated again. This is super useful for using variables and having them update in some places, but not in others. It is also really helpful for optimising your code too! This also applies to any variable mentioned within <h1> or its sub-structure - the entire structure is only rendered once.

v-once can be used pretty much anywhere - including within v-for loops - making it universally useful in Vue.

v-memo

v-memo is kind of similar to v-once, but it gives us a little more flexibility. Within v-memo, we can define an array of variables which, should they update, we will re-render this element and any tags within it. This even applies to variables not mentioned within the HTML tag - so we can force a re-render using this method too.

The beauty of this is that if we have a situation where multiple variables will always update at the same time, we can avoid multiple re-renders. Let's look at a modified version of the code we used for v-once. Here, we have two variables now - message and question. Each update on the click of separate buttons - one for the question, and one for the message. I am using v-memo on the <h1> tag to only update it, should message update:

<script setup>
import { ref } from 'vue'

let message = ref("Hello World")
let question = ref("How are you?")
  
let updateMessage = () => {
  message.value = 'Goodbye World'
}
let updateQuestion = () => {
  question.value = 'What is your name?'
}
</script>

<template>
  <h1 v-memo="[ message ]">{{message}} - {{question}}</h1>
  <button @click="updateMessage">
    Update Message
  </button>
  <button @click="updateQuestion">
    Update Question
  </button>
</template>

If we click on the Update Question button, nothing will change for the user, since v-memo only watches for changes in message, not question - but the question variable will still be updated in the background. However, if we click on the Update Message button, then the <h1> will update immediately, as we have told v-memo to only update should that variable change.

This is a pretty neat trick for optimization, but it also has other uses. For example, you could update an element and all elements/variables within it only when a certain condition is met in your code. The only thing to note is you cannot use v-memo in a v-for loop - so this is something to watch out for.

You can define multiple variables for v-memo by adding them to the array object within v-memo, like so:

<h1 v-memo="[ message, question ]"></h1>

It's also interesting to note that passing in an empty array makes v-memo work the same as v-once 😄:

<h1 v-memo="[]"></h1>

Conclusion

I hope you've enjoyed this vue tip, and overview of v-once and v-memo. Both of these attributes are super useful and I hope you'll find a way to use them in your next Vue project. For more Vue content, you can check out other articles I've written on my blog here.

Also Published here