Vue3 + Ts 学习笔记第二天

@小满zs视频 学习 视频 记录笔记

1. toref 和 torefs / reactive 的使用列举 响应式
   总体来说使用，修改简单数据类型对象的变量还是reactive更方便
   toRefs 和 toRef 都是转成 ref响应式变量 常用于 只想使用复杂数据对象中的一些属性

<template>
  <div>
    <div>{{obj}}div>
    <button @click="edit">修改button>
  div>
template>
<script setup lang="ts">
import { reactive, toRefs ,toRef} from "vue";
const obj = reactive({ name: "小志", age: 0, sex: "男" });
const like = toRef(obj, 'sex')
const { name, age, sex } = toRefs(obj);
function edit() {
  obj.age = 25;
  like.value = "未知"; 
  name.value = "大志";
  console.log(obj);
}
script>

2.计算属性的书写

<template>
  <div>
    <table
      border
      style="width: 800px;"
    >
      <thead>
        <tr>
          <th>名称th>
          <th>数量th>
          <th>单价th>
          <th>操作th>
        tr>
      thead>
      <tbody>
        <tr
          v-for="(item, index) in shop"
          :key="index"
        >
          <td>{{item.name}}td>
          <td><button @click="change(item,false)">-button> {{item.num}}
            <button @click="change(item,true)">+button>
          td>
          <td>{{item.num * 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>

<script setup lang="ts">
import { reactive, computed } from "vue";
type O = {
  name: string;
  num: number;
  price: number;
};
const shop = reactive<O[]>([
  { name: "裤子", num: 1, price: 500 },
  { name: "卫衣", num: 1, price: 300 },
  { name: "鞋", num: 1, price: 500 },
]);
// 加减
const change = (item: O, b: boolean): void => {
  // 如果大于1 为 ture !b 为true 执行 
  if (item.num > 1 && !b) { 
    item.num--;
  }
  // 如果小于99 为 ture b 为 true 执行 
  if (item.num < 99 && b) {
    item.num++;
  }
};
// 删
const del = (index: number): void => {
  shop.splice(index, 1);
};
const total = computed(() => {
  // 计算属性 需要 return
  // reduce((上一个值,对象本身) => {}, 初始值) 需要return 
  return shop.reduce((prev, next) => {
    return prev + next.num * next.price;
  }, 0);
});
</script>