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

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

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

最近在做vue的项目，在使用watch监听属性的时候发现需要同时监听三个属性，作为刚入门的小白，只接触过监听一个属性，上网查找了别人的做法后，找到了解决的方案。

第一种方法

data () {
      return {
      		name1: '',
      		name2: '',
      		age: ''
      }
 },
 
    watch: {
    	'name1': function (val) {
      		if (this.name1 === this.name2) {
            this.$set(this,'age',1)
          } else {
            this.$set(this,'age',null)
          }
      },
       'name2': function (val) {
      		if (this.name1 === this.name2) {
            this.$set(this,'age',1)
          } else {
            this.$set(this,'age',null)
          }
      }
    }

这个方法就是分开下来单独监听每个属性，只要name1或name2改变了，都会执行相应的方法，但是这样写的话重复的代码很多，这显然是不想看见的

第二种方法

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)
          	}
      }
    }

如果不能直接监听多个属性的话，我们可以换个想法，先将多个属性放在一个对象中，直接监听这个对象就可以了，这时候返回的val将会打印出你输入的name1，name2的内容，可以同时监听到这两个属性