05 vue3之computed用法

computed用法

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

1 函数形式

let name = computed(() => {
  return one.value + "---" + two.value; // 取值一定要加.value
});

2 对象形式

let name1 = computed({
  get() {
    return one.value + "---" + two.value;
  },
  set() {
    one.value + "---" + two.value;
  },
});

完整案例

<template>
  <input v-model="one" type="text" />
  <input v-model="two" type="text" />
  <!-- <div>{{ one }}---{{ two }}</div> -->
  <div>{{ name }}</div>
  <div>{{ name1 }}</div>
  
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
let one = ref("");
let two = ref("");
// 1种写法 函数式写法 不允许修改值
let name = computed(() => {
  return one.value + "---" + two.value; // 取值一定要加.value
});
// 2种写法 选项式写法 允许修改值
let name1 = computed({
  get() {
    return one.value + "---" + two.value;
  },
  set() {
    one.value + "---" + two.value;
  },
});


</script>

<style scoped>
table,
td {
  border: 1px solid #333;
}

thead,
tfoot {
  background-color: #333;
  color: #fff;
}
</style>

购物车案例：

能优化代码 减少多次调用

<template>
  <table>
    <input
      placeholder="请输入名称"
      v-model="keyWord"
      type="text"
    />
    <thead>
      <tr>
        <!-- <th colspan="2">The table header</th> -->
        <th>名称</th>
        <th>数量</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in searchData" :key="item">
        <td>{{ item.name }}</td>
        <td>
          <button @click="add(item, true)">+</button
          >{{ item.num
          }}<button @click="add(item, false)">-</button>
        </td>
        <td>{{ item.price * item.num }}</td>
        <td><button @click="del(index)">删除</button></td>
      </tr>
    </tbody>

    <tfoot>
      <td></td>
      <td></td>
      <td></td>
      <td>总价:{{ $total }}</td>
    </tfoot>
  </table>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
type shop = {
  name: string;
  num: number;
  price: number;
};
let keyWord = ref("");

// let $total = ref<string>("0");
let data = reactive<shop[]>([
  { name: "裤子", num: 1, price: 100 },
  { name: "衣服", num: 1, price: 200 },
  { name: "鞋子", num: 1, price: 300 },
]);
const searchData = computed(() => {
  return data.filter((item) =>
    item.name.includes(keyWord.value)
  );
});

let add = (item: shop, type: Boolean): void => {
  if (item.num < 99 && type) {
    item.num++;
    // total();
  }
  if (item.num > 1 && !type) {
    item.num--;
    // total();
  }
};
let del = (index: number) => {
  data.splice(index, 1);
  // total();
};

/* const total = () => {
  $total.value = data.reduce((pre, next) => {
    return pre + next.price * next.num;
  }, 0);
}; */
// total();

// 可以看到total被调用了很多次 我们可以使用computed优化代码
const $total = computed(() => {
  return data.reduce((pre, next) => {
    return pre + next.price * next.num;
  }, 0);
});
</script>

<style scoped>
table,
td {
  border: 1px solid #333;
}

thead,
tfoot {
  background-color: #333;
  color: #fff;
}
</style>