0
点赞
收藏
分享

微信扫一扫

vue3学习记录-computed

吴陆奇 2024-10-02 阅读 26

vue3学习记录-computed

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方法会自动跟着一起调用更新总价的!!!
这里理解下

如果我们把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)
  }
})

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

举报

相关推荐

0 条评论