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

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


当前回答

在vue 3附带的vue组合API中,可以作为vue 2的插件使用,方法和计算属性是不同的语法:

例子:

计算:

它是一个默认接受getter回调作为参数的函数,并根据其他属性(如ref, reactive或store state)返回一个不可变的ref。

import {computed,ref} from 'vue'

export default{

setup(){
  const count=ref(0);
  
  const doubleCount=computed(()=>count.value*2) 

 return {count,doubleCount} //expose the properties to the template 
 }
}

方法

它们是纯javascript函数,在Vue和vanilla js中以相同的方式表现,它们暴露在模板中并用作事件处理程序,它们不应该用于渲染目的,这可能会导致一些问题,如无限渲染。

import {computed,ref} from 'vue'

export default{

setup(){
  const count=ref(0);
  
  const doubleCount=computed(()=>count.value*2) 
 
  function increment(){
   ref.value++
 }

 return {count,doubleCount,increment} //expose the properties/functions to the template 
 }
}

区别在于:

计算:

它被计算为不可变属性,而不是函数 它观察另一个属性并基于该属性返回一个属性。 它不能带参数。 可以使用watch属性观看它

方法:

用于重构computed/watcher属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题,不应该在模板中调用它。

其他回答

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

何时使用方法

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

何时使用计算属性

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

偶然发现了同样的问题。对我来说,更清楚的是:

当Vue.js看到v-on指令后面跟着一个方法时,它确切地知道要调用哪个方法以及何时调用它。

<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button

<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */

当一个方法在没有v-on指令的情况下被调用时,它将在更新DOM的页面上触发一个事件时被调用(或者只是需要重新呈现页面的一部分)。即使该方法与被触发的事件没有任何关系。

<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
   messageUppercase() {
      console.log("messageUpercase");
      return this.message.toUpperCase();
   }
}
/* The method `messageUppercase()` is called on every button click, mouse hover 
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/

Computed属性仅在this词在其函数定义中引用的属性值发生更改时调用。

<p>Uppercase message: {{ messageUppercase }}</p> 
data() {
 return {
    message: "I love Vue.js"
   }
 },
computed: {
 messageUppercase() {
    console.log("messageUpercase");
    return this.message.toUpperCase();
 }
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific 
event changes the value of message.  */

这里的要点是,在没有使用v-on指令调用方法的情况下使用computed属性是最佳实践。

来自文档

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

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

根据vueJs文档,一个简单的方法是:

相比之下,每当重新呈现发生时,方法调用将始终运行该函数。

而计算属性只有在其响应性依赖项发生更改时才会重新计算

计算属性

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

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

方法

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

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