[vue] v-once指令

v-once指令

转自：https://cn.vuejs.org/v2/api/#v-once

• 不需要表达式

详细

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

<!-- 单个元素 -->
<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>

• 参考
  • 数据绑定语法-插值
  • 组件-对低开销的静态组件使用v-once

通过v-once创建低开销的静态组件

渲染普通的HTML元素在Vue中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加v-once特性以确保这些内容只计算一次然后缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的–再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉v-once或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。