vue3.x教程-watch监听器的使用6-加载页面后自动执行（immediate）-马育民老师

# 介绍

默认情况，**不会自动执行**  监视器函数，有 `immediate` 属性，为 `true` 时，表示 **页面加载后自动** 执行监视器函数，默认为 `false`

# 例子

页面加载后，自动执行监视函数

HTML代码：

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

TS 代码：

```
<script lang="ts" setup name='Student'>
	// 导入 watch
	import { ref,watch } from 'vue'
	// 年龄
	let age = ref('')
	// 年龄不符合要求给出的警告信息
	let ageWarn = ref('')
	
	function check(newValue:any){
		// 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 = ''
		}
	}
	// 定义监视器
	watch(
		age,
		(newValue,oldValue)=>{
			console.log("新值：",newValue,"---原值",oldValue)
			console.log(typeof(newValue))
			check(newValue)
		},
		{
			immediate:true // 加载后自动执行监视器函数
		})
</script>

```

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