vue.js 计算属性与$watch的区别?

作者：日知
链接：https://www.zhihu.com/question/55846720/answer/331760496
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

设计模式不同

Computed 是一种声明式的解决方案，我们只需要告诉 vue 某个属性的构成方法，就可以一劳永逸的放手不管了。

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

Watch 是一种命令式的解决方案，我们需要自己处理 vue 某个属性依赖要素的变化，根据变化重置这个属性。

watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}

因此，个人十分享受 Computed ，甚至不惜使用 vue-async-computed 来实现异步下的 Computed。

asyncComputed: {
  async someCalculation () {
    const x = await someAsycFunction()
    const y = await anotherAsyncFunction()
    return x + y
  }
}

响应行为不同

Computed 的响应是 deep 的响应，即在计算过程中用到的对象的属性发生变化，是可以被监听到的。

computed: {
  fullName: function () {
    // this.name 的属性 firstName/lastName 变化时 fullName 会响应。
    return this.name.firstName + ' ' + this.name.lastName
  }
}

然而，一旦 Computed 没有在模板中使用，vue 是不会为我们计算 Computed 内容的。

Watch 的响应默认为非 deep 的响应，即观测的是某个对象的字面量。当然，我们可以为 Watch 设置 deep 响应类型或是监听其属性。

watch: {
  name: function () {
    // this.name 的属性 firstName/lastName 变化时不会触发。
    // TODO
  }
}

总之

两者的使用应当是互补的：

在获得较为简单的属性，且用于展示时，用 computed 可以简化书写。

在进行比较复杂的异步操作，或有比较明显的副作用时，用 watch 逻辑更清晰。

注：个人觉得依赖较多的仍应该用 computed 或 async-computed。

另外，需要注意的是，watch 的计算早于同依赖的 computed。