Vue v-once 指令

实例

使用 v-once 指令仅渲染一次 <img> 元素。

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

定义与用法

v-once 指令用于仅呈现一个元素一次。通过只渲染一次元素，可以增强性能。

当一个元素具有 v-once 指令时，其所有子元素在第一次渲染后也会变为静态。

元素渲染的频率也可能受到 v-memo 指令的限制，以获得性能。