15.v-once

65 阅读1分钟

概念

v-once是vue中的内置指令只渲染元素和组件一次,随后的重新渲染元素/组件及其所有的子节点都视为静态内容(其实就是缓存数据)跳过更新,这可以用于优化性能

使用场景

单个元素

<span v-once>单元素</span>

有子元素

<div v-once>
  <h1>子元素</h1>
</div>

组件

<my-com v-once></my-com>

v-for

//实际上v-once渲染到外层的ul
<ul>
  <li v-for="item in list" v-once></li>
</ul>

vue3.2之后增加了v-memo指令

<div v-memo="[valueA,valueB]">
  <div v-for="item in list " :key="item.id">{{item}}</div>
</div>