在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({// getterget() {return `${firstName.value} ${lastName.value}`;},// setterset(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会避免重复计算，从而提高性能。
methods
- 无缓存：每次调用
methods时，函数都会被执行，即使其依赖的数据没有改变。这意味着，如果你在模板中多次调用同一个方法，Vue会每次都重新执行这个方法。 - 适用于操作：
methods主要用于执行操作，如提交表单、执行异步请求等，而不是用于计算和返回值。
