当前位置：首页 > news >正文

Vue入门【二】-- watch侦听器之普通监听与深度监听

news 来源：原创 2024/5/1 5:27:36

监听器（侦听器）

侦听器是vue提供的一个简便通用的响应数据变化的方法。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

监听器的写法：

设有两个参数，一个是改变后的数据，一个是改变前的数据

a(newVal,oldVal){
					
				}

在监听器中，被监听的变量除了可以写成函数，还可以是一个对象

要监听的变量名称:{
                    handler(){ 
      
                    }
                },

   // 其中handler是固定的配置选项，不能改变它的名称

普通监听

普通监听只能监听到基本数据类型的变化，例如：number、boolean、string

用代码实现一个普通监听：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
	<div id="app">
		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">
		{{total}}
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				a:0,
				b:0,
				total:0
			},
			watch: {
				a(newVal, oldVal){
					// console.log(newVal, oldVal,  '这是watch');
					this.total = this.a + this.b;
				},
				b(){
					this.total = this.a + this.b;
				}
			},
			methods:{}
		})
	</script>
</body>
</html>

深度监听

当被监听的内容是引用数据类型时，watch里面msg（）{ } 这种形式只是普通的浅监听，无法满足我们的需求，因此我们需要使用深度监听来实现对数组/对象里的值进行监听。给监听器添加一个deep属性，默认值是false，当我们将其设置为true时深度监听生效。

用代码实现一个深度监听：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
	<div id="app">
		<input type="number" v-model="a">
		<input type="number" v-model="b">
		<input type="text" v-model="obj.name">
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				a:0,
				b:0,
				total:0,
				obj:{
					name:"zzy",
					age:17
				}
			},
			watch: {
				// 普通监听
				// 基本数据类型
				a(){
					console.log('a被改变了');
				},
				b:{
				// 被监听的变量除了可以写成函数，还可以是一个对象
				// handler是固定的配置选项，不能改变它的名称
				// 有两个参数，一个是新的数据，一个是旧的数据、
					handler(){
						console.log('b被改变了');
					}
				},
				// watch里面a(){}这种形式只是浅监听，只适合监听一层，
				// 如果想监听对象或者数组内部的值，这种形式就不适合了，
				// 这个时候需要深度监听，deep属性，它的默认值是false
				// 引用数据类型
				obj:{
					// console.log('obj被改变了');
					handler(newVal,oldVal){
						console.log(newVal.name,oldVal.name);
					},
					deep:true
				}
			},
			methods:{}
		})
	</script>
</body>
</html>

当实现了深度监听时，obj对象中的属性值也会随着我们的操作而发生变化。