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)}
})
实用场景，允许用户直接编辑总价来应用折扣
