Vue v-memo Directive
Example
Using thev-memo directive to rerender only when theupdateProp property value changes.
<div v-for="x in circle" :style="{ backgroundColor: x.color }" v-memo="[updateProp]"></div>Definition and Usage
Thev-memo directive is used to optimize performance in Vue.
To optimize performance,v-memo is used together with an array of properties, andv-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 withv-memo in rare cases when for example working with large lists created withv-for.
If the array provided withv-memo is empty, like tis:v-memo="[]", you get the same functionality as withv-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()
