第21节: 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>  
    <button @click="getFullName">Get Full Name</button>  
  </view>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
const firstName = ref('');  
const lastName = ref('');  
  
// 计算属性：fullName  
const fullName = computed(() => {  
  return firstName.value + ' ' + lastName.value;  
});  
  
// 方法：getFullName  
const getFullName = () => {  
  alert(fullName.value);  
};  
</script>

在上面的示例中，我们定义了两个响应式引用对象firstName和lastName，分别用于存储名字和姓氏。然后，我们使用computed()函数创建了一个计算属性fullName。fullName的计算逻辑是将firstName和lastName的值拼接起来，并在它们之间添加一个空格。由于fullName依赖于firstName和lastName，因此当这两个属性中的任何一个发生变化时，fullName的值都会自动重新计算。

此外，我们还定义了一个名为getFullName的方法，用于在点击按钮时获取全名并弹出一个提示框。在方法中，我们直接调用了计算属性fullName的值。

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

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

订阅专栏，每日更新

教学视频 Uniapp Vue3 基础到实战

第22节：Vue3 可写计算