vue watchは複数のプロパティを同時にリスニングする方法

vue watchは複数のプロパティを同時にリスニングする方法
vue watchは複数のプロパティを同時にリスニングする方法
最近vueのプロジェクトをしていて、watchを使って属性を傍受するときに3つの属性を同時に傍受する必要があることを発見しました.入門したばかりのシロとして、1つの属性を傍受しただけで、インターネットで他の人のやり方を探して、解決策を見つけました.
第一の方法

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

この方法は,各属性を別々に傍受し,name 1やname 2が変化すれば対応する方法を実行するが,このように書くと重複するコードが多く,これは明らかに見たくない.
第2の方法

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つのオブジェクトに配置して、このオブジェクトを直接傍受すればいいと考えてみましょう.このときに返されるvalは、入力したname 1、name 2の内容を印刷し、この2つのプロパティを同時に傍受することができます.