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

最新推荐文章于 2024-07-19 15:53:40 发布

阳光的男夹克

最新推荐文章于 2024-07-19 15:53:40 发布

阅读量669

点赞数

分类专栏： Vue 2 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44640323/article/details/120019992

版权

Vue 2 专栏收录该内容

63 篇文章 4 订阅

订阅专栏

本文探讨了如何在Vue中使用计算属性`listenChange`进行数据监听，并结合`watch`实现深度监听，确保当name1和name2相等时更新age。实例展示了如何通过即时和深度观察确保实时响应和复杂数据结构的处理。

摘要由CSDN通过智能技术生成

使用计算属性computed，监听计算属性

data () {
      return {
      		name1: '',
      		name2: '',
      		age: ''
      }
 },
computed: {
      listenChange () {
        const {name1,name2} = this
        return {name1,name2}
      }
    },
    
    watch: {
      listenChange (val) {
      		console.log('listenChange :', val)
      		if (val.name1 === val.name2) {
            this.$set(this,'age',1)
        	 } else {
            	this.$set(this,'age',null)
          	}
      }
    }

深度监听

data () {
      return {
      		name1: '',
      		name2: '',
      		age: ''
      }
 },
computed: {
      listenChange () {
        const {name1,name2} = this
        return {name1,name2}
      }
    },
    
    watch: {
    	listenChang: {
      		handler(newVal,oldVal) {
        		if (val.name1 === val.name2) {
          		this.$set(this,'age',1)
        		} else {
          			this.$set(this,'age',null)
        		}
      		},
      		immediate: true,
      		deep: true
    	}
    }