Vue $watch监听对象属性,数组内对象属性改变

目录

我刚开始对数组里的对象属性监听

监听一个对象及属性

同样也可以设置计算属性computed来监听 

首次加载不调用监听函数


我刚开始对数组里的对象属性监听

以下对象里的newValue是改变后的新值,oldValue是改变之前的旧值

watch:{
  'listMenu[4].value':{
       handler(newValue, oldValue) {
      console.log(newValue)
    }
 }

直接报错Watcher only accepts simple dot-delimited paths. For full control, use a function instead

想要监听数组内对象属性变化用以下两种方法即可:

//第一种方法:
created() {
  this.$watch(
    () => this.listMenu[4].value,
    function(val, old) {}
  )
}

//第二种方法:
computed:{
	watchInputData(){ return this.listMenu[4].value }
},
watch:{
  watchInputData() {
    //这里即可监听到
  }
}

监听一个对象及属性

/*普通watch无法监听到对象内部属性变化,只有data中数据改变时才能监听变化。
因此可添加deep属性:深层遍历,会监听对象内所有属性都变化。注意监听数组的变更不需要这么做。*/
watch: {
//第一种监听所有属性的变化,直接监听整个属性,消耗大不建议
    obj: {
      handler(newValue, oldValue) {
        console.log("对象所有属性监听", newValue, oldValue);
      },
      deep: true
    },

//第二种监听对象一个属性的变化
"obj.name": {
       immediate: true, //true首次加载执行,默认false
      handler(newValue, oldValue) {
        console.log("单个属性监听", newValue, oldValue);
      }
    },
}

同样也可以设置计算属性computed来监听 

omputed: {
  getName: function() {
    return this.obj.name
  }
}
watch: {
   getName: {
     handler: function() {
      //监听
     },
   }
}

首次加载不调用监听函数

watch首次加载时不会调用的,只有值变化时才能执行,若要首次调用,需要使用immediate属性。只需在对应的函数内使用immediate: true即可;

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

前端老实人

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值