v-once

  • 不需要表达式

  • 详细

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

  1. <!-- 单个元素 -->
  2. <span v-once>This will never change: {{msg}}</span>
  3. <!-- 有子元素 -->
  4. <div v-once>
  5. <h1>comment</h1>
  6. <p>{{msg}}</p>
  7. </div>
  8. <!-- 组件 -->
  9. <my-component v-once :comment="msg"></my-component>
  10. <!-- `v-for` 指令-->
  11. <ul>
  12. <li v-for="i in list" v-once>{{i}}</li>
  13. </ul>