关于$watch的疑问

Question

<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监听器的两个参数不应该分别是现在的属性和改变前的属性吗，这里不太理解

Answer 1

有没有没被占用的昵称 2021-04-12 09:33:28

这个是全局api的写法，你传入第一个参数是需要侦听的对象，第二个参数是一个函数，函数的第一个参数是newValue，第二个是oldValue。

你所说的应该是在vue组件对象里面使用的watch

可能一般你会这样写

watch: {

    name (new, old) {}

}

实际上也可以这样

watch: {

    name: {

        handler (new, old) {}

    }

}

全局api调用可以看这里

https://v3.cn.vuejs.org/api/instance-methods.html#watch

• 提问者 小菜鸡冲冲冲 #1

  关于函数参数我明白了，非常感谢！但是我对第一个参数有些疑惑，这里的key代表索引号，为什么监听的对象是key呢，没有涉及到增删key值不应该是不变的吗；在我的理解监听的对象应该是data里面的name和age两个，为什么可以这么写

• 有没有没被占用的昵称 回复 提问者 小菜鸡冲冲冲 #2

  确实是监听的data里面的name和age，for in
  时候key恰好是name和age，其实目的就是为了当你修改name和age的时候再走一次validata

• 提问者 小菜鸡冲冲冲 #3

  非常感谢！

Answer 2

提问者 小菜鸡冲冲冲 2021-04-11 17:21:51

而且第一个参数为什么是索引key而不是元素item呢

• Dell #1

  这是 vue 语法设计的时候设计的