vue中watch如何同时监听多个属性

 更新时间:2024年07月24日 08:46:47   作者:努力学习~冲鸭  
这篇文章主要介绍了vue中watch如何同时监听多个属性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue watch同时监听多个属性

1. watch监听的多个属性之间没有联系(name、list),各自监听值改变后执行各自的方法,也无关顺序问题;

watch:{
    name(newValue, oldValue) {
        this.name = newValue
    },
    list(newVal, oldVal) {
        this.list = newVal
    }
}

2. watch监听的多个属性之间相互有联系(useableCardTypeTime、tableData),并且任何一个值改变都有可能对第三个值(addDisable)产生改变,所以监听两个属性的方法中都需要写对第三个值的改变操作;

watch:{
    useableCardTypeTime(newValue, oldValue) {
        if(this.tableData.length >= newValue.length) {
            this.addDisable = true
        } else {
            this.addDisable = false
        }
    },
    tableData(newVal, oldVal) {
        if(newVal.length >= this.useableCardTypeTime.length) {
            this.addDisable = true
        } else {
            this.addDisable = false
        }
    }
}

对于以上多个属性之间有关联的问题,还有一个更为简便的方式来解决,即:

使用 computed 和 watch 监听相结合的方式(推荐):

computed: {
    listenChange () {
        const { useableCardTypeTime, tableData } = this
        return { useableCardTypeTime, tableData }
    }
},
watch:{
    listenChange (val) {
        if(val.tableData.length >= val.useableCardTypeTime.length) {
            this.addDisable = true
        } else {
            this.addDisable = false
        }
    }
}

对于项目中需要一次性监听多个属性值的变化时,推荐大家使用最后一种方式喔~~~(computed 和 watch 相结合

vue watch深度监听多个属性实例

watch :{
    //监听type的变化
    'temp.type': {
      handler(type,old) {
        //这里写你的业务逻辑
        console.log('obj.a changed', type);
        if (type == 1) {
           this.temp.title  = '速来↓↓↓'
        } else {
           this.temp.title  = ''
        }
      },
      immediate: true,
      // deep: true
    },
    'temp.liveName': {
      handler(liveName,old) {
        //这里写你的业务逻辑
        console.log('obj.a changed', liveName);
        if (this.temp.type == 1) {
          this.temp.title = " 速来↓↓↓"
 
        }
      },
      immediate: true,
      // deep: true
    }
  },

watch中的immediate、handler和deep属性

(1)immediate和handler

这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。

如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

(2)deep

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 中使用vue img cutter 图片裁剪插件的方法

    vue3 中使用vue img cutter 图片裁剪插件的方法

    这篇文章主要介绍了vue3 中使用vue img cutter 图片裁剪插件的方法,首先安装依赖,构建 components/ImgCutter.vue 组件,需要的朋友可以参考下
    2024-05-05
  • Vue.js中的组件系统

    Vue.js中的组件系统

    这篇文章主要介绍了Vue.js之组件系统,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue.js实现的绑定class操作示例

    vue.js实现的绑定class操作示例

    这篇文章主要介绍了vue.js实现的绑定class操作,结合实例形式分析了vue.js绑定class常见的3种操作技巧,需要的朋友可以参考下
    2018-07-07
  • vue项目打包之后接口出现错误的问题及解决

    vue项目打包之后接口出现错误的问题及解决

    这篇文章主要介绍了vue项目打包之后接口出现错误的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现动态路由详细

    vue实现动态路由详细

    我们开发后台管理系统过程中,会由不同的人操作系统,有admin(管理员)、superAdmin(超管),及各种运营、财务人员。为了区别这些人员,会给不同的人分配不一样的角色来展示不同的菜单,这就必须要通过动态路由来实现。下面就来介绍vue实现动态路由,需要的朋友可参考一下
    2021-10-10
  • Vue无法访问.env.development定义的变量值问题及解决

    Vue无法访问.env.development定义的变量值问题及解决

    这篇文章主要介绍了Vue无法访问.env.development定义的变量值问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 解析vue中的$mount

    解析vue中的$mount

    本文主要是带领大家分析$mount的相关知识,需要的朋友一起学习吧
    2017-12-12
  • vue项目前端错误收集之sentry教程详解

    vue项目前端错误收集之sentry教程详解

    Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误。这篇文章主要介绍了vue项目前端错误收集之sentry,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • VUE中Echarts的resize事件报错和移除windows的事件问题

    VUE中Echarts的resize事件报错和移除windows的事件问题

    这篇文章主要介绍了VUE中Echarts的resize事件报错和移除windows的事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue2 的12种组件通讯

    Vue2 的12种组件通讯

    之前文章我们描述给过Vue3 的七通信使用,今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-09-09

最新评论