Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue v-memo Directive


Example

Using the v-memo directive to rerender only when the updateProp property value changes.

<div 
  v-for="x in circle" 
  :style="{ backgroundColor: x.color }" 
  v-memo="[updateProp]"
></div>
Run Example »

Definition and Usage

The v-memo directive is used to optimize performance in Vue.

To optimize performance, v-memo is used together with an array of properties, and v-memo will hold back rerendering of an element, and any sub child elements, until one of these properties have changed.

It only makes sense to optimize performance with v-memo in rare cases when for example working with large lists created with v-for.

If the array provided with v-memo is empty, like tis: v-memo="[]", you get the same functionality as with v-once.


Related Pages

Vue Tutorial: Vue v-for Directive

Vue Tutorial: Vue v-bind Directive

Vue Tutorial: Vue CSS Binding

Vue Reference: Vue v-for Directive

Vue Reference: Vue v-once Directive

JavaScript Reference: Window setTimeout()