当前位置: 首页 > news >正文

vue3学习记录-computed

vue3学习记录-computed

  • 1.为什么要用computed
  • 2.使用方法
    • 2.1 基本实例
    • 2.2 可写计算属性

1.为什么要用computed

写个购物车的案例

<script setup>
import { ref, reactive,computed } from "vue"
const tableData = reactive([
  { name: '商品1', price: 10, num: 1 },
  {
    name: '商品2',
    price: 20,
    num: 2
  },
  { name: '商品3', price: 30, num: 3 }
])
const totalPrice = computed(() => {
  return tableData.reduce((acc, cur) => acc + cur.price * cur.num, 0)
})
function total() {
  return tableData.reduce((acc, cur) => acc + cur.price * cur.num, 0)
}
function test() {
  console.log('触发了')
  return 'aaaa'
}
</script>

<template>
  <div class="container">
    <el-table :data="tableData">
    <el-table-column prop="name" label="商品" width="180" />
    <el-table-column prop="price" label="价格" width="180" />
    <el-table-column prop="num" label="数量">
      <template #default="scope">
        <el-input-number v-model="scope.row.num" :min="1" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="danger" size="mini" @click="tableData.splice(scope.$index, 1)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <p>总价:{{ total() }}</p></div>
  <p>{{ test() }}</p>
</template>

我直接在模板里用方法,这里会有个我平常不会注意到的点,这时如果你增加物品数量或则删除物品,total方法会自动跟着一起调用更新总价的!!!
这里理解下

这是由 Vue 的响应式系统和模板渲染机制导致的:
1.响应式数据:
tableData 是一个响应式数组,其中的每个对象的 num 属性也是响应式的。
2.模板中的绑定:
在模板中,您使用了 {{ total() }} 来显示总价。
3.Vue 的渲染机制:
当响应式数据发生变化时,Vue 会重新渲染相关的模板部分。在这个过程中,所有在模板中使用的表达式和方法都会被重新计算。
4.数量变化触发更新:
当您增加或减少商品数量时,tableData 中的 num 值发生变化。这触发了 Vue 的响应式更新。
5.重新计算总价:
由于模板需要重新渲染,{{ total() }} 会被重新执行,计算新的总价

如果我们把total方法返回的值给一个变量,然后模板中写上变量

const totalprice = ref(0)
function total1() {
  totalprice.value =  tableData.reduce((acc, cur) => acc + cur.price * cur.num, 0)
}
onMounted(() => {
  total1()
})
 <p>总价:{{ totalprice }}</p></div>

这样的话,就达到了我的目的。这样的话,但凡你再增加减少物品数量或则删除物品,或则其他可能影响到的操作,你就要在触发事件中手动调用方法来更新数据和视图。
如果页面响应式数据改变,所有模板里的方法会执行,但是computed只会在对应依赖的响应式数据变化才会再次执行。
所以就到了computed的使用。

2.使用方法

2.1 基本实例

constprice = ref(1)
const m = computed(() => {
  return `$` + price.value
})

定义了一个计算属性 m。computed() 方法期望接收一个 getter 函数,返回值为一个计算属性 ref。和其他一般的 ref 类似,你可以通过 m.value 访问计算结果。计算属性 ref 也会在模板中自动解包,因此在模板表达式中引用时无需添加 .value。

Vue 的计算属性会自动追踪响应式依赖。它会检测到 m依赖于 price,所以当 price 改变时,任何依赖于 m的绑定都会同时更新。
这种适用于描述依赖响应式状态的复杂逻辑。

2.2 可写计算属性

const aaa = computed({
  get() {
    return price.value
  },
  set(value) {
    console.log(value)
  }
})

实用场景,允许用户直接编辑总价来应用折扣在这里插入图片描述
在这里插入图片描述

相关文章:

  • 第八章 中间件:SpringBoot 集成 Redis
  • 【微服务】springboot 实现动态修改接口返回值
  • launcher.py: error: the following arguments are required: --output_dir
  • 畅享免费服务:PDF 转图片在线转换软件的魅力
  • 高校实训产品:动漫和游戏场景AI实训平台建设方案
  • 【科普】什么是npm和pip?它们之间有什么异同?
  • C++笔记之标准库和boost库中bind占位符_1的写法差异
  • 集群嵌入的面向对齐的文本高性能研发
  • ruoyi-python 若依python版本部署及新增模块
  • C/C++/EasyX——入门图形编程(3)
  • 【Echarts】折线图和柱状图如何从后端动态获取数据?
  • 手机实时提取SIM卡打电话的信令声音-(题外、插播一条广告)
  • MySQL:进阶巩固-触发器
  • Electron 进程通信
  • Python中的机器学习:从入门到实战
  • C# 无边框窗体,加阴影效果、多组件拖动、改变大小等功能完美实现优化版效果体验
  • 【PostgreSQL 】入门篇——支持的各种数据类型介绍,包括整数、浮点数、字符串、日期、JSON、数组等
  • java中创建不可变集合
  • 速盾:免备案服务器?
  • 常见的 C++ 库介绍
  • 懒人手机网站/seo推广软件下载
  • 吉他谱网站如何建设/西安网站制作建设
  • 重庆的企业的网站建设/淘宝推广怎么推
  • wordpress对接微信/seo教程培训
  • 绍兴网站开发08keji/贵州seo技术培训
  • 网站建设合同审批/青岛网站设计制作