vue3学习记录-computed

1.为什么要用computed
2.使用方法
- [2.1 基本实例](#2.1 基本实例)
- [2.2 可写计算属性](#2.2 可写计算属性)

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)
  }
})

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