VUE中watch用法

一、 watch是什么?

监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。

简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

二、watch的(三种)应用

1、监听一个数据变化

<input type="text" v-model="val"/>
 data(){
   return{
    val:'2'
   }
  },
  watch: {
        val: {
          handler(newVal, objVal) {
          console.log(11);
         },
        }
     }

2、当监测为对象的时候(非数组情况),deep = true (对象内部的属性监听,也叫深度监听),包含handler方法和immediate(进入组件的时候,第一次并不会执行watch,是因为immediate 默认 false,当 immediate = true 的时候,进入组件会立即执行。并且可以监测到组件传递数据)

<input type="text" v-model="obj.name"></p>
watch: {
    'obj.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » VUE中watch用法

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 站元素主机说道:

    学习了 赞一个!

  2. 又发现一个好站,收藏了~以后会经常光顾的 :eek: