Vue3中的computed用法详解

Vue3中的computed属性是一个非常重要的概念，它可以根据其他响应式数据自动计算并更新值。computed属性在Vue3中具有以下特点：

1. 计算属性是基于它们的依赖关系进行缓存的。只有当相关的响应式依赖发生改变时，才会重新计算。
2. 计算属性是懒加载的，即只有当访问计算属性时，才会进行计算。
3. 计算属性可以具有setter和getter访问器，用于控制属性的读写权限。
   在Vue3中，使用computed属性的语法如下：

   import { reactive, computed } from 'vue';
   const state = reactive({
   firstName: 'John',
   lastName: 'Doe'
   });
   const fullName = computed(() => {
   return `${state.firstName} ${state.lastName}`;
   });

   在上面的例子中，我们定义了一个响应式对象state，其中包含firstName和lastName两个属性。然后，我们使用computed函数创建了一个计算属性fullName，它根据firstName和lastName的值自动计算出全名。
   在实际应用中，我们可以在模板中使用计算属性，如下所示：

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

   当访问fullName时，Vue3会自动计算并更新其值。如果firstName或lastName的值发生变化，fullName的值也会相应地更新。
   需要注意的是，计算属性是懒加载的，只有当访问计算属性时，才会进行计算。因此，在组件的setup()函数中定义计算属性时，应将其赋值给一个变量，并在模板中使用该变量，而不是直接使用计算属性。这样可以避免不必要的计算和性能浪费。例如：

   import { reactive, computed } from 'vue';
   const state = reactive({
   firstName: 'John',
   lastName: 'Doe'
   });
   const fullName = computed(() => {
   return `${state.firstName} ${state.lastName}`;
   });
   const displayName = () => {
   console.log(fullName); // 访问计算属性，触发计算过程
   return fullName; // 返回计算属性的值
   };

   在上面的例子中，我们定义了一个函数displayName()，它访问了计算属性fullName，并返回其值。这样，当我们在模板中使用displayName()函数时，计算属性会被懒加载并计算出正确的值。
   另外，计算属性还可以具有setter和getter访问器。例如：

   import { reactive, computed } from 'vue';
   const state = reactive({ firstName: 'John', lastName: 'Doe' });
   const fullName = computed({
   get() { return `${state.firstName} ${state.lastName}`; },
   set(value) {
   const names = value.split(' ');
   state.firstName = names[0];
   state.lastName = names[1];
   }
   });