vue watch对象内的属性监听

更新日期: 2019-09-11阅读: 2.1k标签: watch
watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}
//复制代码注意到handler了吗,我们给 firstName 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。
//而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。
watch:{
            // 通过这种语法来watch就行,文档里有。。。看需求,还可以直接watch data,使用deep:true来深度观察
            'data.status':{
                handler: function(val,oldVal){
                    //要执行的任务
                    //这里不知道怎么才能修改到this.data的数据,有知道的麻烦告知
                    //现在知道的就是通过直接修改Store.state的方式来更新数据,当然效果和修改this.data是一样的
                },
                // 深度观察
                deep:true
            },
function(val) {
      if (val) {
        this.dataForm.hdTicketForm.validityPeriodDisabled = true;
      } else {
        this.dataForm.hdTicketForm.validityPeriodDisabled = false;
      }
    },
        },

// 或:
watch: {
    msg: {
        handler(newValue, oldValue) {
            console.log(newValue)
        },
        deep: true
    }
}

// 或 借助 computed 计算属性
computed: {
    channel() {
        return this.msg.channel
    }
},
watch:{
    channel(newValue, oldValue) {
        console.log('new: %s, old: %s', newval, oldVal)
        //这里面可以执行一旦监听的值发生变化你想做的操作
    }
}


注销watch

为什么要注销 watch?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。

const app = new Vue({
  template: '<div id="root">{{text}}</div>',
  data: {
    text: 0
  },
  watch: {
    text(newVal, oldVal){
      console.log(`${newVal} : ${oldVal}`);
    }
  }
});

但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了,这种注销其实也很简单

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})

unWatch(); // 手动注销watch

app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了。

链接: https://fly63.com/article/detial/5838

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!