vue3.x教程-watch监听器的使用4-监视对象中的某个属性-马育民老师

# 介绍

监视 `ref` 或 `reactive` 对象中的某个属性

**注意：**

- 监视的属性是 **基本类型**，需要写成函数，返回该属性
- 监视的属性是 **对象类型**，可直接监视（**缺点：**赋值新对象时，无法监视到），强烈推荐写成函数，返回该属性

# 例子1：监视的属性是 基本类型

监视的属性是 **基本类型**，需要写成函数，返回该属性

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 { reactive,watch } from 'vue'
	// 年龄
	let student = reactive({
		age:'',
		password:'',
	})
	// 监视器，只监视age，只有age值发生变化时，才会执行函数
	watch(
		// 定义函数，返回age属性，否则监听不到
		()=> student.age,
		(newValue,oldValue)=>{
			console.log("新值：",newValue)
			console.log("原值：",oldValue)
			
		}
	)
	// 给student赋新对象
	function modify(){
		Object.assign(
			student,
			{
				age:'20',
				password:'123456'
			},
		)
	}
</script>
```

# 例子2-1：监视的属性是 对象类型（不推荐）

监视的属性是 **对象类型**，可直接监视（**缺点：**赋值新对象时，无法监视到）

HTML代码：

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

TS代码：

```
<script lang="ts" setup name='Student'>
	// 导入 watch
	import { reactive,watch } from 'vue'
	// 年龄
	let student = reactive({
		age:'',
		password:'',
		score:{
			shuxue:'80',
			yuwen:'70',
		}
	})
	// 监视器，只监视对象中的score属性，该属性也是对象
	watch(student.score,
		(newValue,oldValue)=>{
			console.log("新值：",newValue)
			console.log("原值：",oldValue)
			
		}
	)
	// 给student的score属性赋新对象
	function modify(){
		student.score = {
			shuxue:'10',
			yuwen:'20',
		}
	}
</script>
```

### 特点

- 监视的属性是 **对象类型**，可直接监视
- **缺点：**赋值新对象时，无法监视到

### 原因：赋值新对象时，无法监视到

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

# 例子2-2：监视的属性是 对象类型（推荐）

HTML代码：

TS代码：

```
<script lang="ts" setup name='Student'>
	// 导入 watch
	import { reactive,watch } from 'vue'
	// 年龄
	let student = reactive({
		age:'',
		password:'',
		score:{
			shuxue:'80',
			yuwen:'70',
		}
	})
	// 监视器，只监视对象中的score属性，该属性也是对象
	watch(
		()=>student.score,
		(newValue,oldValue)=>{
			console.log("新值：",newValue)
			console.log("原值：",oldValue)
			
		},
		{
			// 不开启深度监视，给score赋新对象时才能监听到
			// 开启深度监视，修改score中的属性值，也能够监听到
			deep:true
		}
	)
	// 给student的score属性赋新对象
	function modify(){
		student.score = {
			shuxue:'10',
			yuwen:'20',
		}
	}
</script>
```

### 特点

- 默认情况，给 `score` 赋新对象时才能监听到
- **开启深度监视**，修改 `score` 中的属性值，也能够监听到

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