vue3-computed计算属性!!!

1.计算属性具有缓存特性,在computed中的响应式数据不发生变化时,就不重新加载computed中的逻辑。(作用于大量耗时的逻辑解构,并为其数据不经常发生变化,可采取computed计算属性提高程序效率-->常用于购物车数据计算)

代码如下:

html 复制代码
<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const people = ref(["你是好人", "你不是好人"]);
    const config = ref(true);
    console.log(people);
    const num = ref(0);
    const shop = ref([
      { id: 1, name: "苹果", price: 3, num: 2 },
      { id: 2, name: "香蕉", price: 4, num: 1 },
    ]);
    const totalPrice = computed(() => {
      let prices = 0;
      shop.value.forEach((item) => {
        prices += item.price * item.num;
      });
      console.log("用来检测响应式数据的变化");
      return prices;
    });
    return {
      people,
      config,
      totalPrice,
      shop,
      num,
    };
  },
};
</script>
<template>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橘子">橘子</option>
  </select>
  <h2>你选择的水果是:{{ fruit }}</h2> -->
  <!-- <h2 v-show="people">{{ people }}</h2> -->

  <button @click="config = config ? !config : !config">点击切换人设</button>
  <p v-show="config">{{ people[0] }}</p>

  <p v-if="config">{{ people[0] }}</p>
  <p v-else>{{ people[1] }}</p>

  <div v-for="item in shop" :key="item.id">
    <p>商品:{{ item.name }}</p>
    <p
      @click="
        () => {
          const goods = shop.find((obj) => obj.title == item.title);
          goods.price++;
        }
      "
    >
      {{ item.price }}元/斤
    </p>
    <p
      @click="
        () => {
          const goods = shop.find((obj) => obj.title == item.title);
          goods.num++;
        }
      "
    >
      {{ item.num }}个
    </p>
  </div>
  <p>总价: {{ totalPrice }}</p>
  <P>{{ num }}</P>
  <button @click="num++">num++</button>
</template>

通过F12检测数据变化:

相关推荐
陈陈爱java8 分钟前
Spring八股文
开发语言·javascript·数据库
布列瑟农的星空15 分钟前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天16 分钟前
Vue3 实现 B站 视差 动画
前端
KenXu17 分钟前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮19 分钟前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界21 分钟前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说21 分钟前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
小鱼儿亮亮25 分钟前
使用Redux的combineReducers对数据拆分
前端·react.js
烛阴28 分钟前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓32 分钟前
Typescript入门-类型断言讲解
前端·javascript·typescript