Vue深度监视

最新推荐文章于 2024-03-07 14:42:07 发布

zqr4818

最新推荐文章于 2024-03-07 14:42:07 发布

阅读量134

点赞数

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

本文链接：https://blog.csdn.net/zqr4818/article/details/130648775

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1环境准备
- 1.1 准备vue.ja文件
- 1.2 创建一个html文件并引入vue.js文件
2 问题描述
- 2.1 我们如何监视numbers中a属性呢？
- 2.2 我们如何实现监视numbers中所有属性呢？

1环境准备

1.1 准备vue.ja文件

方式1：vue官网
方式2：CND引入<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

1.2 创建一个html文件并引入vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<h1>a: {{numbers.a}}</h1>
	<button @click="numbers.a++">增加a的值</button>
</div>
<script>
	new Vue({
		el: "#app",
		data() {
			return {
				numbers: {
					a: 1,
					b: 1
				}
			}
		}
	});
</script>
</body>
</html>

2 问题描述

2.1 我们如何监视numbers中a属性呢？

有人会想到一下的实现

<script>
	new Vue({
		el: "#app",
		data() {
			return {
				numbers: {
					a: 1,
					b: 1
				}
			}
		},
		watch: {
			numbers.a: {
				handler() {
					console.log("a被改变了");
				}
			}
		}
	});
</script>

尝试后就会发现这样的写法是错误的，正确的写法如下

<script>
	new Vue({
		el: "#app",
		data() {
			return {
				numbers: {
					a: 1,
					b: 1
				}
			}
		},
		watch: {
			'numbers.a': {
				handler() {
					console.log("a被改变了");
				}
			}
		}
	});
</script>

2.2 我们如何实现监视numbers中所有属性呢？

监视numbers中所有属性，即当numbers中的任意属性改变时，numbers都被监视
首先想到如下代码

<script>
	new Vue({
		el: "#app",
		data() {
			return {
				numbers: {
					a: 1,
					b: 1
				}
			}
		},
		watch: {
			numbers: {
				handler() {
					console.log("numbers中属性改变");
				}
			}
		}
	});
</script>

但是这样只是当numbers整个对象改变时才会被监视
正确代码如下，将deep属性设置为true，即开启深度监视

<script>
	new Vue({
		el: "#app",
		data() {
			return {
				numbers: {
					a: 1,
					b: 1
				}
			}
		},
		watch: {
			numbers: {
				deep: true,
				handler() {
					console.log("numbers中属性改变");
				}
			}
		}
	});
</script>