v-once,元素/组件只会渲染一次。
之后的重新渲染,元素/组件及其所有子内容都被视为静态内容而跳过,所以v-once
可以用于性能优化。
虽然可以使用v-once
来创建低开销的静态组件,但实际中还是很少使用它。
<template>
<div v-once>{{msg}}</div>
<!-- <div >{{msg}}</div> -->
</template>
<script>
const data = {
msg:"hello world"
}
export default {
data(){
return data;
},
mounted(){
setTimeout(function(self){
self.msg = "have a nice day"
},1000,this)
}
}
</script>
<div>{{msg}}</div>
时,1秒后,文本内容从“hello world”更新为“have a nice day”;
<div v-once>{{msg}}</div>
时,文本内容始终是“hello world”。