Vue 中的 methods 和 computed 有什么区别？

1. 调用方式

computed 属性类似于普通 JavaScript 对象属性，当响应式数据值改变时，它會自动更新值。

// 定义一个computed属性
computed: {
  fullName: function() {
    // 在这里，我们可以像往常一样引用 this 对象
    return this.firstName + ' ' + this.lastName;
  }
}

你可以像往常引用对象属性一样引用computed属性，而无需显式地将其作为函数来执行。这使它们非常适合于具有派生值的属性，例如计算总价或用户姓名。

<div>
  <!-- 这是一个带computed属性的示例 -->
  <p>姓名: {{ computed.fullName }} </p>
</div>

另一方面，methods 属性类似于常规函数，但是它们绑定到 Vue 实例。这意味著您可以以正常方式来执行它们。

// 定义一个方法
methods: {
  greetUser: function() {
    // 同样，我们也可以像往常一样引用this
    console.log(`你好 ${this.firstName} ${this.lastName}`);
  }
}

当您执行方法时，您必须显式地将其作为函数来执行。这使得它们非常适合于那些需要执行 some action（例如，向API请求数据或更新用户资料）的属性。

<div>
  <!-- 这是一个带method属性的示例 -->
  <button @click="method.greetUser">问候</button>
</div>

2. 绑定方式

computed 属性与响应式数据进行绑定，而methods则与Vue实例进行绑定。这意味著在 computed 属性中，您可以引用父组件和全局数据，而方法只能引用当前组件和全局数据。

// 定义一个computed属性
computed: {
  fullName: function() {
    // 我们可以引用父组件的message
    console.log(this.$parent.message);
  }
}

// 定义一个方法
methods: {
  greetUser: function() {
    // 同样地，我们也可以引用父组件的message
    console.log(this.$parent.message);
  }
}

3. 性能

在性能上，computed 属性通常比 methods 属性更快。这是因为 computed 属性的重新计算只会在其依赖数据发生变化时进行，而 methods 属性在组件更新时总是被执行。因此，对于需要执行一些计算的属性，例如计算总价或用户姓名，使用 computed 属性是一个更优的选择。

结论

computed 属性和 methods 属性是实现 Vue 中响应式数据绑定的两个有用方法。两种方法的主要区别是 methods 属性必须显式地作为函数来执行，而 computed 属性则类似于常规对象属性，直接以对象属性方式直接引用。因此，computed 属性非常适合于那些需要在组件更新时执行的属性，例如计算总价或用户姓名。