vue3学习记录-computed

vue3学习记录-computed

1.为什么要用computed

写个购物车的案例

javascript 复制代码
<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方法返回的值给一个变量,然后模板中写上变量

javascript 复制代码
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 基本实例

javascript 复制代码
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 可写计算属性

javascript 复制代码
const aaa = computed({
  get() {
    return price.value
  },
  set(value) {
    console.log(value)
  }
})

实用场景,允许用户直接编辑总价来应用折扣

相关推荐
The_cute_cat7 分钟前
25.4.22学习总结
学习
苹果酱056727 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.29 分钟前
react和vue的区别之一
javascript·vue.js·react.js
突头小恐龙33 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子33 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
zqlcoding36 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
海底火旺36 分钟前
破解二维矩阵搜索难题:从暴力到最优的算法之旅
javascript·算法·面试
冰茶_41 分钟前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin
爱吃的强哥1 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信1 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化