知识点2--数据追踪和书写格式

尘世壹俗人

已于 2022-07-06 23:04:42 修改

阅读量356

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2022-07-06 17:49:28 首次发布

本文链接：https://blog.csdn.net/dudadudadd/article/details/125643718

版权

VUE 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

vue的脚本中一般使用new Vue()的形式操作渲染，而我们通常会将该对象赋值给一个变量做后续的操作

比如在上一个知识点中我们创建了第一个vue的demo，同时用使用app变量去接收了它，而本篇知识点中我们稍作修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}} {{b}}
		</div>
		
		<script type="text/javascript">
			var data = {message:'Hello Vue!',b:'111'}
			var app = new Vue({
				el:'#app',
				data:data
			});
		</script>
		
	</body>
</html>

其实Vue对象的data参数存在的意义是对元素内容初始化的同时，保证对数据后续的响应追踪

我们来体验一下什么叫响应追踪，可以看一下效果，现在的效果如下
在这里插入图片描述
但如果我们后面修改了某一变量的数据，则Vue对象会追踪到变化，并同步该值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}} {{b}}
		</div>
		
		<script type="text/javascript">
			var data = {message:'Hello Vue!',b:'111'}
			var app = new Vue({
				el:'#app',
				data:data
			});
			
			app.$data.b="ddd";
		</script>
		
	</body>
</html>

在这里插入图片描述

一般情况下我们很乐意让vue去追踪数据的响应，但是不需要的时候我们只需要使用Vue提供的方法声明就可以

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}} {{b}}
		</div>
		
		<script type="text/javascript">
			var data = {message:'Hello Vue!',b:'111'}
			//声明data数据集中的数据不需要响应变化
			Object.freeze(data)
			
			var app = new Vue({
				el:'#app',
				data:data
			});
			
			app.$data.b="ddd"
		</script>
		
	</body>
</html>