Vue 2.0——v-once使用讲解

文章目录

前言
v-once作用
v-once使用

前言

在官方文档中，看见一个很好玩的标签v-once，总感觉实用场景不多，特此记录下。

可能是目前还未看出实际使用地方吧。

v-once作用

平时的使用中，通常进行数据的展示，会采取{{message}}的样式，进行数据的动态刷新显示。

如果只想页面加载时显示一次，后续不在因为数据信息的变动而变动时，就可以采取v-once实现。

v-once使用

有对比才有认知，先不采取v-once进行数据展示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script src="../js/vues.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				message:"66666"
			}
		})
		setTimeout(function(){
			//vm.$data.message = "999999";
			vm.message = "888888";
		},3000)
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在这里插入图片描述

从案例中得知：

一般情况下，Vue实例构建后，会将数据放入message中进行页面渲染显示。
定时器到时间后，依旧能够将数据进行动态刷新。

此时对指定div增加v-once标签，效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" v-once>
			{{message}}
		</div>
	</body>
	<script src="../js/vues.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				message:"66666"
			}
		})
		setTimeout(function(){
			//vm.$data.message = "999999";
			vm.message = "888888";
		},3000)
		
		setTimeout(function(){
			console.log("----->"+vm.message);
		},5000)
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这里插入图片描述

不管等多久时间，数据变化后，不会再次刷新至页面进行显示。

相关阅读:
配电室综合监测系统的组网与应用
双点重发布&路由策略实验
【NM-03】NM协调器的协调关闭总线的网络管理算法
详解TCP/IP的三次握手和四次挥手
推荐一款制作精良、功能强大、毫秒级精度的定时任务执行软件
Posix信号量
天冷就要大口吃肉肉~python采集周边烤肉店数据【附代码】
C++ - Opencv模板匹配与块匹配
把jar包打成docker镜像并推送到Docker Hub
外发文件怎么保存

原文地址：https://blog.csdn.net/qq_38322527/article/details/125561403