第22节: Vue3 可写计算

在UniApp中使用Vue3框架时，你可以使用可写计算属性来封装复杂的计算逻辑，并将结果保存到一个响应式引用对象中，以便在其他地方使用。

下面是一个示例，演示了如何在UniApp中使用Vue3框架使用可写计算：

<template>  
  <view>  
    <input v-model="firstName" placeholder="First Name" />  
    <input v-model="lastName" placeholder="Last Name" />  
    <text>Full Name: {{ fullName }}</text>  
  </view>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
const firstName = ref('');  
const lastName = ref('');  
  
// 可写计算属性：fullName  
const fullName = computed(set => {  
  return {  
    get() {  
      return set(firstName.value + ' ' + lastName.value);  
    },  
    set(value) {  
      const names = value.split(' ');  
      firstName.value = names[0];  
      lastName.value = names[1];  
    }  
  };  
});  
</script>

在上面的示例中，我们定义了两个响应式引用对象firstName和lastName，分别用于存储名字和姓氏。然后，我们使用computed()函数创建了一个可写计算属性fullName。fullName的计算逻辑是将firstName和lastName的值拼接起来，并在它们之间添加一个空格。与普通计算属性不同，可写计算属性返回一个包含get和set方法的对象。在set方法中，我们将全名拆分成名字和姓氏，并将它们分别存储到firstName和lastName中。

在模板中，我们可以像使用普通属性一样使用计算属性fullName。当firstName或lastName的值发生变化时，模板中的文本会自动更新为最新的全名。同时，我们还可以通过调用方法setFullName来设置全名并触发相应的操作。

通过使用可写计算属性，我们可以将复杂的计算逻辑从模板中分离出来，并在需要时手动触发相应的操作。这可以提高代码的可读性和可维护性，并使逻辑更加清晰和可测试。

订阅专栏，每日更新

教学视频 Uniapp Vue3 基础到实战

第21节：Vue3 计算缓存与方法