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 如何使用CryptoJS加密

    Vue3 如何使用CryptoJS加密

    CryptoJS是一个强大的JavaScript库,它提供了多种加密解密功能,尤其是AES加密方法,使用CryptoJS,我们可以有效地保护数据安全,防止信息泄露,通过简单的安装和函数编写,本文给大家介绍Vue3 如何使用CryptoJS加密,感兴趣的朋友一起看看吧
    2024-10-10
  • vue项目添加多页面配置的步骤详解

    vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置。这篇文章主要介绍了vue项目添加多页面配置,需要的朋友可以参考下
    2019-05-05
  • 如何解决vue与传统jquery插件冲突

    如何解决vue与传统jquery插件冲突

    本篇文章主要介绍了如何解决vue与传统jquery插件冲突,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue3中给数组赋值丢失响应式的解决

    vue3中给数组赋值丢失响应式的解决

    这篇文章主要介绍了vue3中给数组赋值丢失响应式的解决方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue3父子组件表单滚动到校验错误的位置实现过程

    Vue3父子组件表单滚动到校验错误的位置实现过程

    文章介绍了如何在包含父表单和多个子表单的场景中,通过滚动方法实现提交时的校验机制,确保数据完整性与用户操作体验
    2025-07-07
  • Vue.js使用v-show和v-if的注意事项

    Vue.js使用v-show和v-if的注意事项

    这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍,而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • Vue echarts画甘特图流程详细讲解

    Vue echarts画甘特图流程详细讲解

    这篇文章主要介绍了Vue echarts画甘特图流程,甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况
    2022-09-09
  • 使用mint-ui开发项目的一些心得(分享)

    使用mint-ui开发项目的一些心得(分享)

    下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 使用Vue.set()方法实现响应式修改数组数据步骤

    使用Vue.set()方法实现响应式修改数组数据步骤

    今天小编就为大家分享一篇使用Vue.set()方法实现响应式修改数组数据步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • ElementUI+命名视图实现复杂顶部和左侧导航栏

    ElementUI+命名视图实现复杂顶部和左侧导航栏

    本文主要介绍了ElementUI+命名视图实现复杂顶部和左侧导航栏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04

最新评论