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

当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属性是最佳实践。

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

当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属性是最佳实践。

计算属性

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

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

方法

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

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

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

在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属性或其他函数中的代码 用作事件处理程序 为了避免呈现问题，不应该在模板中调用它。

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

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

额外的链接

方法 计算属性