vue computed

在 Vue.js 中，computed 属性是一种计算属性，用于在模板中动态计算某个值并返回结果。computed 属性可以依赖于响应式数据，并且只有在依赖的数据发生变化时才会重新计算。这样可以避免频繁的计算和重复的代码。

computed 属性定义在 Vue 实例的 computed 属性中，它是一个对象，对象的每个属性都是一个计算属性。计算属性可以通过函数返回计算结果，也可以通过 get 和 set 方法来实现计算属性的读写操作。

例如，下面是一个计算属性的示例：

<template>
  <div>
    <p>原始数值：{{ num }}</p>
    <p>计算后的数值：{{ computedNum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1
    }
  },
  computed: {
    computedNum() {
      return this.num * 2
    }
  }
}
</script>

在上面的示例中，我们定义了一个计算属性 computedNum，它返回 this.num * 2 的计算结果。因为 computedNum 依赖于 num，所以当 num 发生变化时，computedNum 会重新计算并更新视图。

另外，computed 属性还可以与 watch 属性结合使用，当计算属性的值发生变化时，触发 watch 属性中的回调函数执行相应的操作。