Skip to content

18.v-once 的使用场景有哪些

1.1 v-once 概念

v-once是 Vue 中内置指令,只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

1.2 v-once 使用场景

html
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

vue3.2 之后,增加了v-memo指令,通过依赖列表的方式控制页面渲染。

html
<div>
  <div v-memo="[valueA,valueB]">
    <div class="box" v-for="item in arr" :key="item">{{ item }}</div>
  </div>
</div>
<div>
  <div v-memo="[valueA,valueB]">
    <div class="box" v-for="item in arr" :key="item">{{ item }}</div>
  </div>
</div>

Released under the MIT License.