介绍

默认情况，不会自动执行 监视器函数，有 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>

原文出处：/show_1GW3giDSuJun.html