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>
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()