vue watch怎样同时监听两个值的变化并执行方法？

Question

watch:{
      city(cur,old){
          this.loadTop();
      },
      country(cur,old){
//        this.loadTop();
      },
    }

如上，我想在城市和国家都变化的时候执行刷新的方法，而不是单一执行刷新

Answer 1

用computed定义一个address对象吧，然后再去watch addres

data() {
  return {
    city: '',
    country: ''
  }
},
computed: {
  address() {
    const { city, country } = this
    return {
      city,
      country
    }
  }
},
watch: {
  address: {
    handler: function(val) {
      console.log('address change: ', val)
    },
    deep: true
  }
}

只的在computed里面调用也行，不过要使用$nextTick，不然值会是更新前的值。

data() {
  return {
    city: '',
    country: ''
  }
},
computed: {
  address() {
    const { city, country } = this
    this.$nextTick(() => {
      console.log(this.city, this.country, 3333)
    })
    return {
      city,
      country
    }
  }
},

Answer 2

不能同时监听两个值，
不过你可以

data () {
    return {
        city: '',
        oldCity: '',
        country: '',
        oldCountry: ''
    }
}
watch:{
      city(cur,old){
            if (this.country !== this.oldCountry) {
                this.loadTop();
                this.oldCountry = this.country
            }
      },
      country(cur,old){
            if (this.city !== this.oldCity) {
                this.loadTop();
                this.oldCity = this.city
            }
      },
    }

Answer 3

可以做个计数器
国家改变: count++;
城市改变: count++;

watch: {
    count(value){
       if(2 === value) {
            // 触发code
            
           this.count = 0;
       }
   }
}

抛砖引玉啊, 方法比较拙, 对每个改变的执行此处的判断并没有写, 如果觉得方法可行再补上

不过如果是联动的话, 国家变了, 城市自然为空, 所以你说的逻辑好像不成立, 我只是猜测.