Vue.js中computed属性高效的数据处理案例

export default {
  data() {
    return {
      value1: 1,
      value2: 2
    };
  },
  computed: {
    sum() {
      return this.value1 + this.value2;
    }
  }
};

<template>
  <div>
    <ul>
      <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John', active: true },
        { id: 2, name: 'Jane', active: false },
        { id: 3, name: 'Doe', active: true },
      ],
    };
  },
  computed: {
    activeUsers() {
      return this.users.filter(user => user.active);
    },
  },
};
</script>

<template>
  <div>
    <input type="number" v-model="number" />
    <p>平方: {{ square }}</p>
    <p>立方: {{ cube }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
    };
  },
  computed: {
    square() {
      return this.number * this.number;
    },
    cube() {
      return this.number * this.number * this.number;
    },
  },
};
</script>

<template>
  <div>
    <p>{{ expensiveOperation }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
    };
  },
  computed: {
    expensiveOperation: {
      get() {
        // 这里可以是一个复杂的计算，它不会在每次更改时重新计算
        return this.value * 2;
      },
      set(value) {
        this.value = value;
      },
    },
  },
};
</script>