本文共 783 字，大约阅读时间需要 2 分钟。

计算属性和方法有什么区别？

计算属性和方法在Vue.js中是两种不同的概念，但它们在功能上有着显著差异。计算属性主要用于根据现有数据计算出其他数据的值，而方法则是一些操作的执行者。

### 1. 计算属性的特点

计算属性本质上包含了getter和setter方法。当你在使用计算属性时，Vue.js会自动收集计算属性的依赖，并根据依赖的变化重新计算结果。这意味着计算属性的结果会被缓存，只有当依赖发生变化时，计算属性才会重新执行。

与方法不同，计算属性的getter方法没有参数，而setter方法只有一个参数。这使得计算属性的使用更加简洁，适用于处理基于当前状态的数据转换任务。

### 2. 方法的特点

方法则更像是一个函数，可以接受任意数量的参数，并执行特定的操作。每次调用方法时，方法内部的逻辑都会被执行，这意味着方法的结果不会被缓存，每次调用都会重新执行一次。

### 3. 两者的使用场景

计算属性适用于需要根据现有数据计算出其他数据的场景。例如，你可以用它来根据一个属性计算出另一个属性的值，而不必每次都手动进行计算。方法则适用于需要执行特定操作的场景，如改变数据状态、提交表单等。

### 4. 代码示例

完整的计算属性书写方式如下：

computed: {
  propName: {
    get() {
      // 获取逻辑
    },
    set(value) {
      // 设置逻辑
    }
  }
}

只包含getter的计算属性可以简写为：

computed: {
  propName() {
    // 获取逻辑
  }
}

### 5. 使用注意事项

虽然计算属性可以用于处理数据转换，但不建议在其中使用异步操作、当前时间或随机数等可能导致副作用的操作。因为这样会导致计算属性的结果难以正确管理和缓存。