vue3.x教程-watch监听器的使用2-监视 ref对象类型-马育民老师

# 介绍

监视 ref对象类型，分两种：

- 默认情况
- 开启深度监视

# 默认情况

监视 ref定义的 **对象类型**，**监视的是对象的 地址**，当对象地址发生变化（即：给对象赋值时），才会执行监视器函数

**提示：**若想监视对象内部的数据，要手动开启深度监视。

### 例子

与 [vue3.x教程-watch监听器的使用1-监视 ref基本类型](https://malaoshi.top/show_1GW3ggZ7dpQu.html "vue3.x教程-watch监听器的使用1-监视 ref基本类型") 类似，但是表单内容更多，为了更好的管理，将属性放到变量中，比如：年龄、密码。。。

html代码：

```
<template>
	年龄： <input type="text" v-model="student.age" />
	<br>
	密码： <input type="text" v-model="student.password" />
	<br>
	<button @click="modify">给student赋新值</button>
</template>
```

ts代码：

```
<script lang="ts" setup name='Student'>
	// 导入 watch
	import { ref,watch } from 'vue'
	// 定义对象
	let student = ref({
		age:'',
		password:'',
	})
	// 监视器
	watch(student,(newValue,oldValue)=>{
		console.log("新值：",newValue)
		console.log("原值：",oldValue)
		
	})
	// 给student赋新对象时，student地址会改变，才会被监视器看到，执行监视函数
	function modify(){
		student.value = {
			age:'20',
			password:'123456'
		}
	}
</script>
```

### 特点

默认情况：

- 修改 `student` 对象的属性时，不会被监视器看到，即：**不会执行监视器函数**

- 给 `student` 赋新对象时，`student` **地址会改变**，才会被监视器看到，**执行监视函数**

# 开启深度监视

监视 ref定义的 **对象类型**，**手动开启深度监视**，当对象的 **属性值发生变化**，就会执行监视器函数

### 开发深度监视

修改 `watch()` 函数，增加第3个参数，启用深度监视，对象的属性值发生变化时，也能监视到

### 例子

修改上面例子的 `watch()` 函数，如下：

```
watch(student,(newValue,oldValue)=>{
	console.log("新值：",newValue)
	console.log("原值：",oldValue)

},{
	// 启用深度监视，对象的属性值发生变化时，也能监视到
	deep:true
})
```

### 特点

对象中，任意一个属性发生变化，都会监视到

### 注意：修改属性后，新值、原值是一样的

[![](https://www.malaoshi.top/upload/0/0/1GW3gfmJDnx5.png)](https://www.malaoshi.top/upload/0/0/1GW3gfmJDnx5.png)

如上图，修改年龄后，新值、原值是一样的，这是因为修改的是 `student` 对象的 `age` 属性，即：修改的是 **同一个对象**，所以新值、原值是同一个值

执行下面代码：

```
student.value = {
	age:'20',
	password:'123456'
}
```

是给 `student` **赋值新对象**，即：两个对象--新对象、原对象，所以 `newValue`、`oldValue` 是不同的

原文出处：http://malaoshi.top/show_1GW3ggaOgM1y.html