computed（计算属性）的使用

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

1. 函数方式

<template>
    <div>
      {
    
    {
    
    m}}
      <button @click="add">加一</button>
    </div>
</template>
<script setup lang="ts">
import {
    
    reactive,computed,ref} from 'vue'
let price=ref(0);
let m=computed<string>(()=>{
    
    
    return '总金额:'+price.value;
})
price.value=500
function add(){
    
    
    price.value++;
}

页面输出结果为“总金额：500”，点击button自动加一，显示到视图上。

2. 函数方式

<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>

视图结果：1和click,点击click后，1变成set100

购物车实例

<template>
<div>
    <table style="width:800px" border>
        <thead>
            <tr>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>单项总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr :key="index" v-for="(item,index) in data">
                <td align="center">{
    
    {
    
    item.name}}</td>
                <td align="center">
                    <button @click="AddanSub(item,false)">-</button>
                    {
    
    {
    
    item.num}}
                    <button @click="AddanSub(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 align="center">总价:{
    
    {
    
     $total }}</td>
            </tr>
         </tfoot>
    </table>
</div>
 </template>
  
 <script setup lang="ts">
 import {
    
     computed, ref,reactive } from 'vue'
 
type Shop = {
    
    
   name: string,
   num: number,
   price: number
}
let $total = ref<number>(0)
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 AddanSub = (item: Shop, type: boolean = false): void => {
    
    
   if (item.num > 1 && !type) {
    
    
      item.num--
   }
   if (item.num <= 99 && type) {
    
    
      item.num++
   }
}
const del = (index: number) => {
    
    
   data.splice(index, 1)
}
$total = computed<number>(() => {
    
    
   return data.reduce((prev, next) => {
    
    
    console.log(prev,next)
      return prev + (next.num * next.price)
   }, 0)
})

 </script>
  
 <style>
 </style>