在setup中使用计算属性

在学习vue3.0后，我们一般都不再单独配置data、methods、computed、filters和生命周期函数等，我们一般给script标签行内加上setup,使整个标签环境都为setup函数环境，然后在这个环境管理全部配置。

data和methods内的数据和方法，我们直接在setup函数环境下声明即可。但是计算属性computed需要缓存它所监控的数据的结果，当页面第一次渲染后，只有计算属性内所使用的数据发生变化时才会再次触发计算属性的方法。

很明显script标签下像以前一样配置是一个错误的语法，如：

<script setup>
    compoted:{
         //......
    }
</script>

因此，框架为我们封装了一个工具函数computed，通过import { computed } from "vue"导入。

将我们设计的计算属性传入computed()处理过后即可实现计算属性的效果。

示例：计算两个监控两个数的和

<script setup>
import { ref,computed } from "vue";
    let a=ref(10)
    let b=5
    let c=ref(1)
    let sum=computed(()=>{
        console.log("我被调用了");
        return a.value+b
    })
    let changea=()=>{
        console.log("a改变");
        a.value=a.value+1
    }
    let changec=()=>{
         console.log("c改变");
        c.value=c.value+1
    }
</script>
<template>
<div>
    <p>{{a}}----{{b}}----{{c}}</p>
    <p>总价:{{sum}}</p>
    <button @click="changea">a加1</button>
     <button @click="changec">c加1</button>
</div>
</template>

 点击一下a加1，再点击一下c+1看一下效果：

分析：可以看到控制台的打印情况，计算属性在第一次加载页面时运行了一次，然后点击加a时，计算属性监听到a的改变，再次被调用；当点击加c时，c与计算属性无关，即未从新运行。

注意：只有计算属性内的数据是响应式数据时，计算属性才会动态刷新 

须知：

缓存是计算属性最显著的特点也是其的优点，计算属性会把使用到的数据的计算结果缓存起来，只有其中的数据发生改变时，才会从新计算，防止页面发生大量重复计算， 提升js 运行效率，但是这也是其的缺点，为什么这么说呢？

 缺点：如果简单的运算也用计算属性或者全部方法都放在计算属性中 反而会增加资源消耗(计算属性会去监听计算的值 而且会缓存计算的结果 )  比如生日转年龄这种简单运算，我们在做项目时选择合适的属性写我们的方法，计算属性一般用在计算商品总价中。