Vue： computed 计算属性

news2024/11/28 1:15:54

在Vue中，computed属性是用于计算和返回基于其他响应式数据的值的功能。

适合在模板中使用，因为能够根据依赖的数据自动更新。

当依赖的数据变化时，computed属性会重新计算，并且会将结果缓存，以提高性能。

computed的用途

数据处理：对原始数据进行加工处理，比如格式化、拼接等。
动态计算：根据多个响应式数据计算出一个新值。
避免重复计算：computed属性会缓存结果，只有依赖的值发生变化时才会重新计算，这样可以提高性能。

computed的特性

响应式：computed属性是响应式的，会跟踪依赖的变化。
缓存：如果依赖的值没有变化，computed属性将返回缓存的结果，而不重新计算。
可以定义getter和setter：使用对象形式时，可以同时定义getter和setter方法，允许对计算属性进行读写操作。
- 不写setter 默认是只读，当你尝试修改一个计算属性时，你会收到一个运行时警告。需要用到可写的情况，可以通过同时提供 getter 和 setter 来创建可写计算属性

示例

<template>
  <div>
    <h1>用户设置</h1>
    <p>全名: {{ fullName }}</p>
    <input v-model="fullNameInput" placeholder="输入全名">
    <button @click="resetName">重置姓名</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // 定义响应式数据
    const firstName = ref('');
    const lastName = ref('');

    // 定义计算属性
    const fullName = computed({
      // getter
      get() {
        return `${firstName.value} ${lastName.value}`;
      },
      // setter
      set(newValue) {
        const names = newValue.split(' ');
        firstName.value = names[0] || ''; // 设置名字
        lastName.value = names[1] || ''; // 设置姓氏
      }
    });

    // 为了方便输入全名，定义一个用于双向绑定的响应式数据
    const fullNameInput = ref('');

    // 当全名输入框的内容变化时，更新计算属性
    watch(fullNameInput, (newValue) => {
      fullName.value = newValue; // 更新计算属性的值
    });

    // 重置姓名的函数
    const resetName = () => {
      firstName.value = '';
      lastName.value = '';
      fullNameInput.value = ''; // 清空输入框
    };

    return {
      fullName,
      fullNameInput,
      resetName
    };
  }
}
</script>

响应式数据：
firstName和lastName用于存储用户的名字和姓氏。
fullNameInput是一个响应式数据，用于双向绑定输入框的内容。
计算属性fullName：
getter：返回拼接后的全名。
setter：允许通过全名更新firstName和lastName。当全名输入时，将其分割成名字和姓氏。
输入框：
当用户在输入框中输入全名时，fullNameInput的变化会触发watch，从而更新计算属性fullName。
重置功能：
resetName方法可以清空名字、姓氏和输入框的内容。

computed的优势

计算属性有几个显著的优势：

缓存机制：计算属性的结果会被缓存，只有当依赖的数据发生变化时才会重新计算，这提高了性能。
响应式：计算属性是响应式的，当依赖的数据发生变化时，计算属性会自动更新。
易于维护：通过将复杂的逻辑封装在计算属性中，可以避免在模板中使用复杂的表达式，从而简化模板的维护。

computed与methods对比

computed属性

缓存特性：computed属性会根据其依赖的响应式数据进行缓存。只有当依赖的数据改变时，计算属性才会重新计算。这意味着，如果你在模板中多次使用同一个计算属性，Vue会只计算一次并缓存结果，直到依赖项发生变化。
性能优化：由于computed属性的结果是缓存的，因此在需要频繁访问相同计算结果时，它比methods更高效。例如，当你在模板中多次引用一个复杂的计算属性时，使用computed会避免重复计算，从而提高性能。