[vue] v-once指令
阿新 • • 發佈:2018-12-14
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
建立低開銷的靜態元件
渲染普通的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
或漏看了它在模板中,他們可能會花很多個小時去找出模板為什麼無法正確更新。