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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
 

这个方法就是分开下来单独监听每个属性，只要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)
          	}
      }
    }


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
 

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

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108277548