6、Vue-组合式-计算属性

模板中的表达式虽然比较方便，但是当逻辑比较复杂的时候, 会让模板变得臃肿，因此有了计算属性的概念

一、基础应用

使用下述代码替换app.vue

<script setup>
import {computed, reactive, ref} from "vue";

// 由于计算属性默认是只读的，所以必须要使用reactive去定义对象
const userData = reactive({
    name: "张三",
    task: ['吃饭', '睡觉', '玩游戏']
})

// 计算属性函数
const inputTaskList = computed(()=>{
    return userData.task.length > 0 ? userData.task : "今天没有事情做"
})
</script>

<template>
    <h3>原始写法</h3>
    <p>姓名: {{userData.name}}</p>
    <p>今日任务: {{userData.task.length > 0 ? userData.task : "今天没有事情做"}}</p>

    <h3>计算属性</h3>
    <p>姓名: {{userData.name}}</p>
    <p>今日任务: {{inputTaskList}}</p>
</template>

通过上述例子和截图可以看出： 直接在模板中计算属性的结果和使用computed去计算属性的结果是相同的，使用computed会让模板代码变的更简洁

计算属性（computed）和方法（method）的区别 computed：代码不变更的情况下，每次调用都会使用之前的缓存结果，性能更好 method：代码不变更的情况下，每次调用都会重新计算一次，多了不必要的性能开销2