vuejs 中的 watch 方法和计算方法有什么区别

Question

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

Answer 1

计算属性就像数据属性。计算的字面意思是“使用给定值计算”。

正如含义表明计算属性是其依赖值的计算结果（在 vuejsdata属性中，props）

例如：

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

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

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

总结差异：

Answer 2

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

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

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

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

另请参阅计算属性和观察者指南。他们为观察者提供的一个例子是一个去抖动的服务调用，它会加载额外的数据。

但总的来说，要点是：尝试对所有内容都使用计算属性。如果它不能用作计算属性，请使用观察者。