Vue3系列5--computed计算属性

1 computed用法

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

• 函数形式

?

1 2 3 4 5 6 7 8

import { computed, reactive, ref } from 'vue' let price = ref(0)//$0    let m = computed<string>(()=>{    return `$` + price.value })    price.value = 500

• 对象形式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>    <div>{{ mul }}</div>    <div @click="mul = 100">click</div> </template>    <script setup lang="ts"> import { computed, ref } from 'vue' let price = ref<number | string>(1)//$0 let mul = computed({    get: () => {       return price.value    },    set: (value) => {       price.value = 'set' + value    } }) </script>    <style> </style>

2 computed购物车案例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

<template>   <div>     <table sytle="width:1500px" border>       <thead>         <tr>           <td>名称</td>           <td>数量</td>           <td>单价</td>           <td>单个商品总价</td>           <td>操作</td>         </tr>       </thead>       <tbody>         <tr :key="index" v-for="(item, index) in data">           <td align="center">{{ item.name }}</td>           <td align="center">             <button @click="AddORSub(item, false)">-</button>             {{ item.num }}             <button @click="AddORSub(item, true)">+</button>           </td>           <td align="center">{{ item.price }}</td>           <td align="center">{{ item.num * item.price }}</td>           <td align="center"><button @click="del(index)">删除</button></td>         </tr>       </tbody>       <tfoot>         <tr>           <td></td>           <td></td>           <td></td>           <td></td>           <td>总价:{{$mytotal}}</td>         </tr>       </tfoot>     </table>   </div> </template>     <script setup lang="ts"> import { computed } from '@vue/reactivity'; import { nextTick, reactive ,ref} from 'vue'; let $mytotal = ref<number>(0)   type Shop = {   name:string,   num:number,   price:number }   const data = reactive<Shop[]>([   {     name: "袜子",     num: 1,     price: 100   },   {     name: "裤子",     num: 1,     price: 200   },   {     name: "衣服",     num: 1,     price: 300   },   {     name: "毛巾",     num: 1,     price: 400   } ])   const AddORSub = (item: Shop, type: boolean): void => {   if (item.num > 1 && !type) {     item.num--     // total()   }   if (item.num < 99 && type) {     item.num++     // total()   } }   const del=(index:number)=>{   data.splice(index,1) }   $mytotal = computed(()=>{   return data.reduce((prev,next)=>{     console.log('prev',prev)     console.log('next',next)     return prev + next.num*next.price   },0) })   // const total=()=>{ //   $mytotal.value = data.reduce((prev,next)=>{ //     return prev + next.num*next.price //   },0) // } // total()   </script>