vue.js - vuejs中watch方法和计算方法有什么区别

Question

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

Answer 1

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

正如意思表明计算属性是其依赖值的计算结果(在 vuejs 中 data 属性，props )

例如:

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

在上面的例子中，计算属性 uppercase取决于数据属性 lowerCase .它将字母转换(计算)为大写。
每当 lowercase更改，因此使用此计算属性的任何模板绑定(bind)都会自动更新。

监视属性更通用，并且以一种方式更强大(有点昂贵)来监视数据属性的变化。
您可以在观察者中执行复杂的功能、异步任务。 documentation 中给出的示例是使用观察者的一个很好的例子。

总结差异:

与监视属性不同的计算属性应该返回一个值。

计算属性就像数据属性一样，可以使用
在模板中使用 {{ }}但不能使用观察者。观察者应该执行逻辑来更新模板中使用的数据属性。