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中是非常快速的，但有的時候你可能有一個元件，這個元件包含了大量

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

再說一次，試著不要過度使用這個模式。當你需要渲染大量靜態內容時，極少數的情況下它會給你帶來便利，除非你非常留意渲染變慢了，不然它完全是沒有必要的–再加上它在後期會帶來很多困惑。例如，設想另一個開發者並不熟悉v-once

或漏看了它在模板中，他們可能會花很多個小時去找出模板為什麼無法正確更新。