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属性对对象进行深度监听。

总结

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

相关文章

  • 如何根据业务封装自己的功能组件

    如何根据业务封装自己的功能组件

    这篇文章主要介绍了Vue封装功能组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue3中pinia用法示例

    Vue3中pinia用法示例

    这篇文章主要介绍了Vue3中使用pinia,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 详解vue中多个有顺序要求的异步操作处理

    详解vue中多个有顺序要求的异步操作处理

    这篇文章主要介绍了vue中多个有顺序要求的异步操作处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue3如何实现表格内容无缝滚动(又写了一堆冗余代码)

    vue3如何实现表格内容无缝滚动(又写了一堆冗余代码)

    这篇文章主要给大家介绍了关于vue3如何实现表格内容无缝滚动的相关资料,在Vue3项目中难免会遇到让列表滚动的需求,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • Vuex中State的使用方法

    Vuex中State的使用方法

    这篇文章主要介绍了Vuex中State的使用方法,Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态,这也意味着,每个应用将仅仅包含一个 store 实例,需要的朋友可以参考下
    2023-11-11
  • Vue.js组件使用props传递数据的方法

    Vue.js组件使用props传递数据的方法

    这篇文章主要为大家详细介绍了Vue.js组件使用props传递数据的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue实现多条件筛选超简洁代码

    vue实现多条件筛选超简洁代码

    这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下
    2023-09-09
  • vue3集成bpmn.js详细代码示例

    vue3集成bpmn.js详细代码示例

    bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成,这篇文章主要给大家介绍了关于vue3集成bpmn.js的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue中的slot封装组件弹窗

    vue中的slot封装组件弹窗

    这篇文章主要介绍了vue中的slot封装组件弹窗,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue3请求后端接口实现方式

    Vue3请求后端接口实现方式

    本文详解Vue3中使用Fetch和Axios与后端交互的方法,涵盖请求发起、状态管理、错误处理及跨域等解决方案,推荐优先使用Axios,其拦截器、自动转换等特性提升开发效率,建议封装实例与API函数以统一配置
    2025-09-09

最新评论