• Vue 2.0——数据与方法(官方文档解读)

    文章目录

    前言

    以官方文档给出说明和案例为基础，进行自我学习和理解的扩充。

    理解响应式的几大参数含义

    在官方文档中，针对数据的响应式渲染，有这么一段描述：

    当一个Vue实例被创建时，它将 data 对象中的所有的property加入到 Vue 的响应式系统中。

    当这些property的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

    这句话从字面意思上说的很绕，但是如果换一种思维方式来看这段描述内容就会豁然开朗。

    以JAVA的开发思维来看这个问题。
    在使用VUE时，必须先构建VUE的实例对象，也就是需要采取new Vue()的方式。
    既然是对象，那么这个对象中可能存在某些属性，恰好目前我们所能熟知的有两大属性：el和data。

    el就是指让哪个容器进行响应。
    data就是指响应时，需要显示的内容信息。

    那么，此时的Vue对象，根据Java类的结构，可以大致理解为下面的类结构：

    public class Vue{
	// 需要响应数据的容器对象
	private Object el;
	// 响应的数据信息
	private Object data;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    响应测试

    有了上面的理解，接下来按照官方文档中给出的案例，进行数据的响应式理解。

    官方文档中说到：当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

    按照官方的栗子：

    <!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 datas = {message:"xiangjiao"};
		var vues = new Vue({
			el:"#app",
			data:datas
		});
	</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述
    使用方式一：datas.message进行值的修改：

    datas.message = "99999";

    • 1

    在这里插入图片描述
    使用方式二：vues.message进行值的修改：

    vues.message = "666666";

    • 1

    在这里插入图片描述
    使用方式三：vues.$data.message 进行值的修改：

    vues.$data.message = "bunana";

    • 1

    在这里插入图片描述

    $使用注意事项

    $的出现，是因为在开发中可能出现开发者定义的属性名和vue本身的属性名一样的情况。为了避免使用和理解上的混淆，vue团队推出$用来区分Vue本身和用户定义 实例的 property 、方法。

    针对下面代码进行说明：

    vues.$data.message = "bunana";

    • 1

    vues.$data是vue本身的data属性信息，使用vues.$data.message实际上就是指下图的对应信息：
    在这里插入图片描述

    vues.$data 就是 new Vue对象中的 data属性，这个属性的值为 {message:“xiangjiao”}

    使用$watch监听指定vue实例中某个变量值的变化

    vue官方文档中提出了一个很好玩的技术：$watch，用来监听某个变量的数据值的前后变化。如下所示：

    <!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 datas = {message:"xiangjiao"};
		var vues = new Vue({
			el:"#app",
			data:datas
		});
		
		//datas.message = "99999";
		//vues.message = "666666";
		//alert(JSON.stringify(vues.$data));
		
		// 针对指定变量，进行设定“观察”
		vues.$watch('message',function(newVal,oldVal){
			console.log("newVal:"+newVal);
			console.log("oldVal:"+oldVal);
		})
		
		// vues.$data 就是  new Vue对象中的 data属性，这个属性的值为 {message:"xiangjiao"}
		vues.$data.message = "bunana";
		
		
	</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
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    允许代码后，控制台打印数据信息如下所示：
    在这里插入图片描述

    特别注意一点

    只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。

    这句话可以理解为：
    需要显示的区域如下所示

    <div id="app">{{message}}</div>

    • 1

    此时，如果需要message变量的值能够支持响应式显示，那么必须在new Vue时，其属性必须具备初始值，如下所示：

    new Vue({
	el:"#app",
	data:{
	    message:"xiangjiao"
	}
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    如果从一开始就未在new Vue 构建实例时将message进行初始化，那么后面不管如何进行数据的变更，都不会让该属性能够响应式显示(数据随之变化)。

  • 相关阅读:
    C++初探 5-2（while循环 do while循环 输入 二维数组）
    基于springboot+vue的信息技术知识赛系统
    [附源码]SSM计算机毕业设计朋辈帮扶系统JAVA
    Python反序列化免杀上线CS：两次编码绕过
    【Transformer系列】深入浅出理解Embedding（词嵌入）
    Centos 7 配置阿里云yum源
    u盘被写保护了无法格式化怎么办？
    FFmpeg入门详解之114：DirectShow读取摄像头数据
    Java学习----UDP和反射
    umi4 React项目使用icon集合
  • 原文地址：https://blog.csdn.net/qq_38322527/article/details/125539787