vue3.x教程-watch监听器的使用1-监视 ref基本类型-马育民老师

# 介绍

监视 ref基本类型

# 例子

如下图，输入年龄不符合要求，会给出警告提示：

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

输入年龄校验：

- 不能是空
- 必须是整数
- 不能是负数、不能大于120岁

### 代码

html：
```
<template>
	年龄： <input type="text" v-model="age" />
	<span style="color: red;">{{ageWarn}}</span>
</template>
```

js：
```
<script lang="ts" setup name='Student'>
	// 导入 watch
	import { ref,watch } from 'vue'
	// 年龄
	let age = ref('')
	// 年龄不符合要求给出的警告信息
	let ageWarn = ref('')
	watch(age,(newValue,oldValue)=>{
		console.log("新值：",newValue,"---原值",oldValue)
		console.log(typeof(newValue))
		
		// 1. 判断空值
		if(newValue === ''){
			ageWarn.value = '请输入年龄'
			return
		}
		// 2. 正则判断：是否全部为数字
		const reg = /^\d+$/
		if (!reg.test(newValue)) {
			ageWarn.value = '请正确输入年龄'
			return
		}
		// 转成number类型，判断是否超过最大值
		let ageNum = Number(newValue)
		console.log(ageNum,typeof(ageNum))
		// 判断是否超过最大值
		if(ageNum>120){
			ageWarn.value = '年龄不能大于120岁'
		}else{
			ageWarn.value = ''
		}
	})
</script>
```

**注意：**监听属性必须存在，才能进行侦听

### 特点

- 当属性 `age` 的值 改变时，才会触发执行 `age` 监视器函数
- 函数有两个形参，第一个形参是 **新值**，第二个形参是 **原值**

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