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
指令来限制元素渲染的频率,从而提高性能。
相关页面
Vue 参考:Vue v-memo 指令
Vue 教程:Vue v-bind 指令
Vue 教程:Vue v-on 指令
Vue 教程:Vue 方法
Vue 教程:Vue 生命周期钩子