Vue3之computed计算属性

computed：当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。（我们需要的值，根据属性变化计算）

1.函数形式

import { reactive, computed, ref } from 'vue'

    let name = ref<string>('计算属性')

    let m1 = computed(()=>{

        return `$` + name.value +'---获取' //依赖项变化就会触发

    })

    name.value = '我变化了'

2.对象形式

 let name = ref<string>('计算属性')

let m2 = computed({

        get:()=>{

            return `$` + name.value +'---获取'

        },

        set:()=>{

            name.value = 'computed对象形式'

        }

    })

购物车简单案例

<template>

    <div>

        <table style="width: 1000px;" border="">

            <thead>

                <tr>

                    <th>名称</th>

                    <th>数量</th>

                    <th>价格</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(item,index) in shopList" :key="index">

                    <td>{{item.name}}</td>

                    <td>

                        <button @click="changeNum(item,true)" border>+</button>

                        {{item.num}}

                        <button @click="changeNum(item,false)" border>-</button>

                    </td>

                    <td>{{item.price}}</td>

                    <td>

                        <button @click="del(index)">删除</button>

                    </td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td>总价：{{$total}}</td>

                </tr>

            </tfoot>

        </table>

    </div>

</template>

interface Good {

        name:string,

        num:number,

        price:number

    }

    let $total = ref<number>(0)

    let shopList = reactive<Array<Good>>([

        {

            name:"裤子",

            num:1,

            price:100,

        },

        {

            name:"帽子",

            num:2,

            price:200,

        },

        {

            name:"丝袜",

            num:1,

            price:300,

        },

        {

            name:"袜子",

            num:1,

            price:100,

        }

    ])

    const del = (index:number) => {

        shopList.splice(index,1)

    }

    const changeNum = (item:Good,type:boolean) => {

        if(item.num<99 && type){

            item.num ++

        }

        if(item.num>1 && !type){

            item.num --

        }

    }

    $total = computed(()=>{

        return shopList.reduce((prev,next)=>{

            return prev + (next.num * next.price)

        },0)

    })