Vue v-once Directive

<template>  <h1>v-once Example</h1>  <p>The image is only rendered once. Changing the image source does not have any effect.</p>  <img v-once v-bind:src="imgUrl[imgIndex]">  <p>Img src: '{{ imgUrl[imgIndex] }}'</p>  <button v-on:click="changeImg">Change image</button></template>

Definition and Usage

Thev-once directive is used to only render an element once.

By only rendering an element once, the performance can be enhanced.

When an element has thev-once directive, all its child elements also becomes static after the first render.

How often an element gets rendered can also be limited by thev-memo directive to gain performance.

Related Pages

Vue Reference:Vue v-memo Directive

Vue Tutorial:Vue v-bind Directive

Vue Tutorial:Vue v-on Directive

Vue Tutorial:Vue Methods

Vue Tutorial:Vue Lifecycle Hooks