computed 如何使用

Computed 是 Vue.js 中的一个计算属性，它的用途是根据已有的数据进行一些计算，然后返回计算结果。使用 computed 可以有效地减少模板中的逻辑处理，使代码更简洁，易读性更高。

使用 computed 很简单，只需在 Vue 实例中定义一个 computed 对象即可，该对象的属性名为计算属性的名称，属性值为一个函数，函数的返回值即为计算属性的值。

例如：

new Vue({
  data: {
    num1: 5,
    num2: 10
  },
  computed: {
    sum: function () {
      return this.num1 + this.num2
    }
  }
})

在上面的例子中，我们定义了一个计算属性 sum，它的值为 num1 和 num2 的和。在模板中可以直接使用 sum，而不需要在模板中写计算逻辑。例如：

<div>{{ sum }}</div>

当 num1 或 num2 发生变化时，sum 的值会自动更新。

除了返回值外，computed 函数还可以接收一个参数，该参数表示计算属性所依赖的数据。当依赖的数据发生变化时，计算属性的值也会更新。例如：

new Vue({
  data: {
    num1: 5,
    num2: 10
  },
  computed: {
    sum: function () {
      return this.num1 + this.num2
    },
    diff: function () {
      return this.num1 - this.num2
    },
    product: function () {
      return this.num1 * this.num2
    },
    quotient: function () {
      return this.num1 / this.num2
    }
  }
})

在上面的例子中，我们定义了四个计算属性，它们的值分别为 num1 和 num2 的和、差、积和商。这四个计算属性都依赖于 num1 和 num2，当 num1 或 num2 发生变化时，这四个计算属性的值都会自动更新。