Question

他们似乎都做同样的事情，我不知道何时使用哪个

Answer 1

计算属性就像数据属性一样。计算的字面含义是使用给定值计算的。

正如意义所示，计算属性是其相关值的计算结果（在vuejs data属性中，props）

例如：

data:{
    lowerCase: 'abcd'
},
computed:{
    uppercase(){
        return this.lowerCase.toUpperCase();
    }
}

在上面的示例中，计算属性uppercase依赖于数据属性lowerCase。它将字母转换（计算）为大写。每当lowercase发生更改时，使用此计算属性的任何模板绑定都会自动更新。

Watch属性更通用，并且在某种程度上更强大（有点贵），可以监视数据属性的变化。您可以在观察者中执行复杂的功能和异步任务。 documentation中给出的示例是使用观察者的一个很好的例子。

总结差异：

Answer 2

计算属性基本上是“虚拟”属性，在首次使用时会对其进行评估。它们将自动缓存，直到组件中的更改需要重新评估属性。

监视属性只是一种检测属性更改的机制，允许您执行自定义逻辑。

由于观察者功能更强大，您可以使用它们执行与计算属性相同的操作：基本上，您将观察所有依赖属性，并且每当值发生更改时，您将重新计算属性并将其存储在Vue实例的数据中

除非您需要复杂的逻辑，否则计算属性将以更具说明性的方式执行此操作：您不需要显式监听所有依赖属性，而是依赖Vue自动检测计算属性所依赖的属性。因此，您只需声明性地说明如何计算计算属性，而不必担心其他问题。计算机专业人员也已经有了一个很好的缓存机制，你必须自己与观察者一起做。

另见the guide on computed properties and watchers。他们为观察者提供的一个示例是去抖服务调用，它将加载其他数据。

一般来说，要点是：尝试对所有事物使用计算属性。如果它不能用作计算属性，请使用观察者。

Answer 3

很难比 the doc

更清楚地表达这一点

tldr; computed属性具有反应性。它们的输出被缓存，并且如果它们的任何输入发生变化则自动更新。更改流出到页面上，我们无需担心何时。 watch是“必要且重复的”。你可以用事件做任何事情，但如果可以的话，你应该尝试提升食物链。