Vue计算属性computed传参

vue计算属性无法直接传参，可以通过匿名函数实现。

<template>
  <div id="id">
    <h1>{{ add(100, 200) }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    add() {
      // 使用匿名函数接受参数再return结果
      return (a, b) => {
        return a + b
      }
    }
  }
}
</script>

<style></style>

如果你说不如使用methods来实现这个要求，那么我我们就要探究computed和methods的区别了，引用官方文档原话如下。

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。