关于$watch的疑问

来源：5-9 数据校验插件开发实例

小菜鸡冲冲冲

2021-04-11

<script>
    //插件对数据校验


    const app = Vue.createApp({
       data(){
           return{ name:'dell',
           age:25}
       },
       //自定义一个规则
       rules:{
        age:{
            validate:(age)=>{return age>25},
            message:'too young'
        },
        name:{
            validate:(name)=>{return name.length>4},
            message:'name too short'
        }
       },

       template:`
        <div>name:{{name}},age:{{age}}</div>
       `
    });
    
    const validatePlugin=(app,options)=>{
        app.mixin({
            created(){
            
            //.$optionsy用来获取定义在data外的数据和方法
       
            for(let key in this.$options.rules){
                const item=this.$options.rules[key]
                console.log(item)
                
                this.$watch(key,(value)=>{
                    const result=item.validate(value);
                    if(!result) console.log(item.message)
                } )
            }
        }
    })
   }
       
   app.use(validatePlugin)
    
    const vm = app.mount('#root');
</script>

为什么倒数第五行代码$watch的第二个参数可以自动获取改变后的data里的属性值呢；
watch监听器的两个参数不应该分别是现在的属性和改变前的属性吗，这里不太理解

写回答

2回答