VueJS：观察两个属性答案

【问题标题】：VueJS: watching two propertiesVueJS：观察两个属性
【发布时间】：2017-10-19 18:29:18
【问题描述】：

假设我有两个数据属性：

data() {
  return {
    a: false, 
    b: false, 
  }
}

当a和b同时变成true时，我想执行一个相关的任务。

如何在 Vue 中使用 watch 方法来实现这一点？

【问题讨论】：

【解决方案1】：

观察一个计算值。

computed:{
    combined(){
        return this.a && this.b
    }
}
watch:{
    combined(value){
        if (value)
            //do something
    }
}

上面有一种使用$watch的简写形式。

vm.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // do something
  }
)

【讨论】：

它仍然是唯一的方法还是 vue 有任何更新？
@berkan 我不知道。我已经有一段时间没有机会在 Vue 工作了。
结合计算属性和观察者的最聪明的解决方案。谢谢！ :)
以这种方式使用组合计算域看起来完全错误。如果 a=true 和 b=false，然后它们更改为 a=false 和 b=true 或 a=false 和 b=false，则观察者将不会执行，因为组合值仍然是 false ......更不用说这对于布尔值非常特殊。尽管该方法本身非常有效 - 您只需要找到正确的方法来生成组合价值。例如，combined(){ return [this.a, this.b]; } 应该适用于几乎任何基本类型值（可能不适用于对象 - JSON.stringify([a, b]) 在这种情况下应该适用）

【解决方案2】：

这与@Bert 建议的解决方案几乎相同。但是您可以执行以下操作：

data() {
  return {
      combined: {
          a: false, 
          b: false, 
      }
  }
},

然后：

watch: {
    combined:{
        deep:true,
        handler
    }
}

【讨论】：