Vue3+TypeScript学习笔记（四）

1. computed计算属性有两种写法，第一种比较常用，直接传入一个回调函数，其return的值会被包装成一个ComputedRef类型的对象。在模板中可以直接使用。

2. computed仅在依赖项更新时才会重新执行。

   计算属性基本用法

<template>
    <input type="text" v-model="firstName" />
    <input type="text" v-model="lastName" />
    <input type="text" v-model="fullName" />
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

let firstName = ref()
let lastName = ref()

// <>内为传入的类型
let fullName = computed<string>(() => {
    return firstName.value + '-----' + lastName.value
})

如果要直接修改fullName的值则需要在这里传入配置对象设置set方法
let fullName = computed({
    get() {
        return firstName.value + '--------' + lastName.value
    },
    set() {},
})
</script>

<style scoped></style>

1. 使用v-for时如果源数据是一个数组则遍历的是（item，index），其中index从0开始。不要总是盯着item，index在需要用到splice方法时很有用处。
2. 数组有一个相对复杂的reduce方法，其作用将数组缩减为单个元素。具体操作方法为提供一个回调函数，该回调接收四个参数total、currentValue、index和arr（后两个很少用到）。reduce会为数组中的每个元素执行该函数，返回值会作为下一次的total再次参与计算。currentValue表示当前正在执行方法的数组元素。此外，该函数接收第二个参数表示第一次执行时total的值，若没有提供则默认为数组的第一个元素（能提供尽量提供）

示例用法：计算数组中每个元素之和并输出

let arr = [1, 2, 3, 4, 5]
let total = arr.reduce((prev, next) => {
  return prev + next
},0)
console.log(total)

注意：如果没有提供prev的初始值，prev将默认为数组的第一个元素并且next将从第二个元素开始计算。如果提供了prev的初始值next将从第一个元素开始计算

购物车案例

<template>
    <table border :style="{ width: '800px', 'text-align': 'center' }">
        <thead>
            <tr>
                <td>名称</td>
                <td>数量</td>
                <td>单价</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list" :key="index">
                <td>{{ item.name }}</td>
                <td>
                    <button @click="change(item, false)">-</button> {{ item.num }}
                    <button @click="change(item, true)">+</button>
                </td>
                <td>{{ item.price }}</td>
                <td><button @click="clearRaw(index)">删除</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>总价</td>
                <td>{{ total }}</td>
            </tr>
        </tfoot>
    </table>
</template>

<script setup lang="ts">
import { isTemplateNode } from '@vue/compiler-core'
import { remove } from '@vue/shared'
import { ref, reactive, computed } from 'vue'
type Shop = {
    name: string
    num: number
    price: number
}
let list = reactive<Array<Shop>>([
    {
        name: '小满的裤子',
        num: 1,
        price: 100,
    },
    {
        name: '小满的衣服',
        num: 1,
        price: 200,
    },
    {
        name: '小满的丝袜',
        num: 1,
        price: 300,
    },
])
const change = (tip: Shop, istrue: boolean) => {
    if (tip.num > 1 && istrue == false) {
        tip.num--
    }
    if (tip.num < 99 && istrue == true) {
        tip.num++
    }
}
const clearRaw = (index: number) => {
    list.splice(index, 1)
}
let total = computed(() =>
    list.reduce((prev, next) => {
        return prev + next.num * next.price
    }, 0)
)
</script>

<style scoped></style>