Vue基础入门07，深入理解 Vue computed 计算属性：缓存机制与 methods 的核心区别-优快云博客

在 Vue 开发中，我们经常需要根据已有数据处理并返回新的结果，比如对列表进行过滤、拼接字符串、计算数值总和等。此时，computed计算属性和methods方法都能实现这个需求，但很多初学者会疑惑：两者到底有什么区别？什么时候该用 computed，什么时候该用 methods？

这篇文章将从computed的缓存机制入手，深入剖析它与methods的核心差异，帮你彻底搞懂二者的使用场景。

一、先看一个简单的例子

我们先通过一个基础案例，直观感受下computed和methods的表现差异。

假设我们有一个 Vue 实例，里面有firstName和lastName两个数据，需要拼接成完整的姓名：

1. 使用 methods 实现

<template>
  <div>
    <p>姓名：{{ getFullName() }}</p>
    <p>姓名：{{ getFullName() }}</p>
    <p>姓名：{{ getFullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  methods: {
    getFullName() {
      console.log('methods执行了');
      return this.firstName + this.lastName;
    }
  }
}
</script>

此时打开控制台，会发现methods执行了被打印了三次—— 因为模板中每次调用getFullName()，方法都会重新执行一次。

2. 使用 computed 计算属性实现

<template>
  <div>
    <p>姓名：{{ fullName }}</p>
    <p>姓名：{{ fullName }}</p>
    <p>姓名：{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      console.log('computed执行了');
      return this.firstName + this.lastName;
    }
  }
}
</script>

这时候控制台只打印了一次computed执行了—— 即使模板中多次引用fullName，计算属性也只执行了一次。

这个差异的根源，就是computed的缓存机制。

二、computed 的缓存机制：到底是什么？

Vue 的计算属性基于其依赖的响应式数据进行缓存。简单来说：

计算属性会记住它的依赖（比如上面例子中的firstName和lastName），只有当依赖的响应式数据发生变化时，计算属性才会重新计算并更新结果；如果依赖没有变化，每次访问计算属性都会直接返回缓存的结果，不会重新执行函数。

缓存机制的底层逻辑（简易版）

当 Vue 实例初始化时，会解析计算属性的函数，收集其中依赖的响应式数据（如firstName、lastName）。
第一次访问计算属性时，执行函数并将结果缓存起来。
当依赖的响应式数据发生变化时，Vue 会触发依赖更新，清空计算属性的缓存，下次访问时重新计算并缓存新结果。
如果依赖没有变化，直接返回缓存的结果。

举个例子：依赖变化时的缓存更新

我们给上面的例子加一个按钮，修改firstName：

<template>
  <div>
    <p>姓名：{{ fullName }}</p>
    <p>姓名：{{ fullName }}</p>
    <button @click="changeFirstName">修改姓</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      console.log('computed执行了');
      return this.firstName + this.lastName;
    }
  },
  methods: {
    changeFirstName() {
      this.firstName = '李';
    }
  }
}
</script>

此时：

页面初始化：打印 1 次computed执行了（缓存结果：张三）。
点击按钮修改firstName为 “李”：依赖变化，打印 1 次computed执行了（重新计算并缓存：李四）。
再次访问fullName：直接返回缓存的 “李四”，不再执行函数。

三、computed vs methods：核心区别

通过上面的例子，我们可以总结出二者的核心差异：

特性	computed 计算属性	methods 方法
缓存机制	基于依赖的响应式数据缓存结果	无缓存，每次调用都会重新执行函数
调用方式	模板中直接引用（如`{{ fullName }}`），无需加括号	模板中需要加括号调用（如`{{ getFullName() }}`）
返回值要求	必须有返回值（因为要缓存结果）	可以有返回值，也可以无返回值（如处理事件）
响应式依赖	自动追踪依赖的响应式数据	不会自动追踪，仅在调用时执行
适用场景	数据处理、数据派生（依赖固定数据）	事件处理、一次性操作、复杂逻辑（无需缓存）

补充：computed 的 setter 和 getter

计算属性默认只有 getter（取值函数），但也可以设置 setter（赋值函数），实现 “可写的计算属性”：

computed: {
  fullName: {
    // getter：取值时执行
    get() {
      return this.firstName + this.lastName;
    },
    // setter：赋值时执行
    set(newValue) {
      const [first, last] = newValue.split(' ');
      this.firstName = first;
      this.lastName = last;
    }
  }
}

此时，我们可以直接给fullName赋值：this.fullName = '王五'，setter 会被触发，自动更新firstName和lastName。而 methods 无法实现这种 “赋值联动” 的效果。

四、什么时候用 computed？什么时候用 methods？

结合缓存机制和使用场景，我们可以给出明确的选择原则：

优先用 computed 的场景

需要根据已有响应式数据派生新数据：比如拼接字符串、过滤列表（filteredList）、计算数值（totalPrice）等。
数据会被多次访问：比如模板中多次引用、多个地方使用同一个派生数据，缓存能减少重复计算，提升性能。
依赖的数据源是固定的响应式数据：计算属性的缓存只有在依赖变化时才会更新，适合这种场景。

优先用 methods 的场景

处理事件逻辑：比如按钮点击、表单提交等（这是 methods 最常见的用途）。
执行一次性操作：比如请求接口、操作 DOM、随机数生成（因为随机数不是响应式依赖，computed 无法缓存）。
复杂逻辑且无需缓存：比如需要传递参数的函数（computed 无法直接接收参数，虽然可以通过闭包实现，但不如 methods 直观）。
不依赖响应式数据的操作：比如纯逻辑计算，没有依赖的响应式数据，computed 的缓存机制就失去了意义。

注意：computed 不能直接接收参数？

有同学会问：computed 能不能像 methods 一样接收参数？

答案是：默认不能，但可以通过返回函数的方式间接实现，比如：

computed: {
  getFullName() {
    // 返回一个函数，接收参数
    return (middleName) => {
      return this.firstName + middleName + this.lastName;
    }
  }
}

模板中调用：{{ getFullName('小') }}。

但这种方式会失去缓存机制—— 因为每次调用都会返回一个新的函数，相当于每次执行都是新的计算，此时 computed 的缓存优势就没了。所以如果需要传递参数，优先用 methods。

五、性能影响：缓存的重要性

在简单场景下，computed 和 methods 的性能差异并不明显，但在复杂计算或大量数据处理的场景下，缓存机制的影响会被放大。

比如，我们有一个包含 1000 条数据的列表，需要过滤出符合条件的项：

// 用computed：只在列表或过滤条件变化时重新计算
computed: {
  filteredList() {
    return this.list.filter(item => item.age > 18);
  }
}

// 用methods：每次调用都要遍历1000条数据
methods: {
  getFilteredList() {
    return this.list.filter(item => item.age > 18);
  }
}

如果模板中多次引用这个过滤后的列表，computed 只需要执行一次过滤，而 methods 需要执行多次，性能差异会非常明显。