Vue事件监听Watch的使用

shbi131xx

已于 2022-02-18 09:30:46 修改

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-01-04 11:30:33 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56079094/article/details/122299231

本文详细介绍了Vue.js中watch的使用方法，包括基本的变量监听和对象属性值监听。通过watch，你可以实现在变量变化时执行特定的回调函数，例如在data数据增大或减小时进行不同的操作。此外，还展示了如何监听对象属性的变化并触发相应的警告提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当事件监听到变量的变化时，就会执行Watch中对应的方法

watch的使用方法

1.一般值监听

data(){
  return{
     data:0
  }
},
//watch与data同级
watch:{
  //以需要监听的变量的名字作为函数名称
  //（非必须）可以接收两个参数 第一个:变化后的值；第二个:变化前的值 
  //当监听data数据变化的时候会执行这个函数
  data(newvalue,oldvalue){
    if(newvalue>oldvalue){
     console.log('变大了')
     }else{
       cosole.log('变小了')
     }
  }
},

2.对象的属性值监听

    'ruleForm.content' (newVal, oldVal) {
      // if (newVal.content !== '' && oldVal.content === '') {
      //   alert('正在输入')
      // }
      alert('111')
    }