Vue v-once
v-once这个指令不需要任何表达式,它的作用就是定义它的元素或组件只会渲染一次,包括元素或者组件的所有字节点。首次渲染后,不再随着数据的改变而重新渲染。也就是说使用v-once,那么该块都将被视为静态内容。下面我们看个例子,我们先不使用v-once指令:<!--v-once示例--><template><div>
·
v-once这个指令不需要任何表达式,它的作用就是定义它的元素或组件只会渲染一次,包括元素或者组件的所有字节点。首次渲染后,不再随着数据的改变而重新渲染。也就是说使用v-once,那么该块都将被视为静态内容。
下面我们看个例子,我们先不使用v-once指令:
<!--v-once示例-->
<template>
<div>
<div>{{count}}</div>
<button v-on:click="addCount">加个一吧</button>
</div>
</template>
<script>
export default {
name: "Vonce",
data() {
return {
count: 10
}
},
methods: {
addCount: function () {
this.count += 1;
console.log('this.count:'+this.count);
}
}
}
</script>
<style scoped>
</style>
我们看下程序运行结果:
然后我们点击按钮:
很显然,数据会重新渲染。
那么,我们在使用v-once指令:
<div>
<div v-once>{{count}}</div>
<button v-on:click="addCount">加个一吧</button>
</div>
然后,同样的操作,看下程序和控制台的输出:
这个指令在实际的业务场景中是很少使用的,只有我们想进一步去优化性能的时候,可能会用到。所以很多教程可能不会提及这个指令,这里也是让大家知道这个指令的基本用法。
更多推荐
已为社区贡献12条内容
所有评论(0)