Vue.js中方法和计算值的主要区别是什么?

在我看来,它们是一样的,是可以互换的。


当前回答

来自文档

..计算属性是基于它们的依赖项缓存的。计算属性只有在其某些依赖项发生更改时才会重新计算。

如果您希望缓存数据,请使用Computed属性,另一方面,如果您不想缓存数据,请使用简单的Method属性。

其他回答

下面是这个问题的详细分析。

何时使用方法

对DOM中发生的事件做出反应 在组件中发生事情时调用函数。 可以从计算属性或观察器调用方法。

何时使用计算属性

您需要从现有数据源组合新数据 在模板中使用的变量是由一个或多个数据属性构建的 您希望将复杂的、嵌套的属性名称简化为更易于阅读和使用的名称(但在原始属性更改时更新它) 您需要从模板引用一个值。在这种情况下,创建计算属性是最好的,因为它是缓存的。 您需要侦听多个数据属性的更改

计算属性

计算属性也称为计算值。这意味着,它们可以随时更新和更改。此外,它还缓存数据,直到数据发生更改。在实例化Vue时,计算属性将转换为属性。

还有一件事我想分享,你不能在计算属性中传递任何参数,这就是为什么在调用任何计算机属性时不需要括号。

方法

方法与函数相同,以相同的方式工作。此外,除非调用方法,否则方法什么也不做。此外,像所有javascript函数一样,它接受参数,并且每次调用时都会重新计算。之后,它们就不能缓存值了

在方法中调用圆括号,你可以发送一个或多个参数。

来自文档

..计算属性是基于它们的依赖项缓存的。计算属性只有在其某些依赖项发生更改时才会重新计算。

如果您希望缓存数据,请使用Computed属性,另一方面,如果您不想缓存数据,请使用简单的Method属性。

以下是ve3文档所说的-查看一个例子:

对于最终结果,这两种方法确实完全相同。然而,不同之处在于计算属性是基于它们的响应性依赖项进行缓存的。计算属性只有在其响应性依赖项发生更改时才会重新计算。[…相比之下,方法调用将始终在重新呈现发生时运行该函数。

额外的链接

方法 计算属性

computed和methods之间的区别在于,当你在computed中定义一个函数时,它只在答案改变时才从头执行该函数,而methods在每次调用时都从头执行该函数。