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 and . Both of these allow us to optimize when a component or component tree is re-rendered. v-once v-memo 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 . 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, . Let's look at an example, where I am using on an tag: CSS Vue variables accordingly v-once v-once <h1> <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 set to , which can be updated on the click of a button to . We are using this variable in both our header, and as the value of our . message Hello World Goodbye World message h1 input Although clicking the button will update the value of the - the will still have the old text, since it has the attribute . Essentially, the 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 or its sub-structure - the entire structure is only rendered once. input h1 Hello World v-once h1 <h1> can be used pretty much anywhere - including within loops - making it universally useful in Vue. v-once v-for v-memo is kind of similar to , but it gives us a little more flexibility. Within , 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. v-memo v-once v-memo 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 . Here, we have two variables now - and . Each update on the click of separate buttons - one for the question, and one for the message. I am using on the tag to only update it, should update: v-once message question v-memo <h1> message <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 button, nothing will change for the user, since only watches for changes in , not - but the variable will still be updated in the background. , if we click on the button, then the will update immediately, as we have told to only update should that variable change. Update Question v-memo message question question However Update Message <h1> v-memo 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 in a loop - so this is something to watch out for. v-memo v-for You can define multiple variables for by adding them to the array object within , like so: v-memo v-memo <h1 v-memo="[ message, question ]"></h1> It's also interesting to note that passing in an empty array makes work the same as 😄: v-memo v-once <h1 v-memo="[]"></h1> Conclusion I hope you've enjoyed this vue tip, and overview of and . Both of these attributes are super useful and I hope you'll find a way to use them in your next Vue project. . v-once v-memo For more Vue content, you can check out other articles I've written on my blog here Also Published here
