v-once
- 作用:专门标记一个元素只在首次加载时更新一次内容,之后,即使变量发生变化,元素内容也不更新。
- 原理:new Vue()扫描到
v-once
后,只更新一次v-once
所在元素的内容,并且不会将v-once
加入虚拟DOM树,今后,即使变量值发生变化,也无法通知到v-once
所在的元素,自然不会更新元素的内容 - 优化: 如果今后发现个别元素只需要在首次页面加载更新一次,之后不会在更新,都可以用
v-once
标记,进一步减少虚拟DOM树种元素的个数,进一步提高虚拟DOM树的效率 - 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div v-once>上线时间:{{time}}</div>
<div>当前系统时间:{{time}}</div>
</div>
<script>
setTimeout(() => {
var vm = new Vue({
el: "#app",
data: {
time: new Date().toLocaleString(),
},
mounted(){
this.getTime();
},
methods:{
getTime(){
setInterval(() => {
this.time = new Date().toLocaleString();
}, 1000);
}
}
});
}, 1000);
</script>
</body>
</html>