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

在这里插入图片描述

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

相关阅读:
【CTO变形记】有序定无序—为什么越努力，越无力
[rust] Rust与C++20编码习惯对照
基于FPGA的FIR滤波器的设计与实现
【Kafka】(1)基础知识汇总
HTML5 —— 初识 Canvas 画布
THM-Linux提权-权限升级
第八章、ansible基于清单管理大项目
【Vue基础】路由以及axios详解与使用案例
ARC121F Logical Operations on Tree
200. 岛屿数量

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