【转】[Vue] computed 的用法

转自：kimi.ai

在 Vue.js 中，computed 是一个非常强大且常用的特性，用于定义计算属性。计算属性是基于 Vue 的响应式系统实现的，它的值会根据依赖的响应式数据动态更新。以下是关于 computed 的详细说明：

1. 基本概念

computed 属性本质上是一个函数，它会基于依赖的响应式数据进行计算，并返回一个值。当依赖的响应式数据发生变化时，computed 属性会自动重新计算并更新其值。

2. 使用方法

computed 属性需要在 Vue 组件的选项对象中定义，通常与 data、methods 等选项一起使用。它的值是一个对象，对象的每个键值对表示一个计算属性。

示例代码

JavaScript复制

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

说明

• data 中定义了两个响应式数据 firstName 和 lastName。
• 在 computed 中定义了一个计算属性 fullName，它基于 firstName 和 lastName 的值进行拼接。
• 当 firstName 或 lastName 发生变化时，fullName 会自动重新计算并更新。

3. 计算属性的缓存机制

与 methods 不同，computed 属性具有缓存机制。只有当依赖的响应式数据发生变化时，computed 属性才会重新计算。如果依赖的数据没有变化，Vue 会直接返回之前计算的结果，而不是重新执行计算函数。这种缓存机制可以提高性能，避免不必要的计算。

示例对比

JavaScript复制

<template>
  <div>
    <p>Computed Result: {{ computedValue }}</p>
    <p>Method Result: {{ methodValue() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    computedValue() {
      console.log('Computed is called');
      return this.count * 2;
    }
  },
  methods: {
    methodValue() {
      console.log('Method is called');
      return this.count * 2;
    }
  }
};
</script>

• 当 count 没有变化时，computedValue 不会重新计算，console.log 不会重复输出。
• 而 methodValue 每次渲染都会被调用，console.log 会重复输出。

4. 计算属性的 getter 和 setter

计算属性默认只有 getter，但也可以定义 setter。当计算属性被赋值时，setter 会被触发。

示例代码

JavaScript复制

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Full Name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
};
</script>

说明

• fullName 是一个带有 getter 和 setter 的计算属性。
• 当用户输入新的 fullName 时，setter 会被触发，将输入的值拆分为 firstName 和 lastName。

5. 使用场景

• 数据转换：将原始数据转换为其他格式，例如格式化日期、金额等。
• 依赖多个数据的计算：基于多个响应式数据进行复杂计算，例如计算总价、平均值等。
• 优化性能：避免重复计算，利用缓存机制提高性能。

6. 注意事项

• 计算属性依赖的必须是响应式数据。如果依赖非响应式数据，计算属性不会自动更新。
• 计算属性的名称不能与 data 中的属性名冲突，否则会导致错误。

computed 是 Vue 中非常实用的功能，通过合理使用计算属性，可以简化代码逻辑，提高代码的可读性和性能。