返回
动动手指点天下，Vue3美味食客即刻享用
前端
2024-01-31 19:49:14
指尖轻触，玩转美食：Vue3 点餐实战秘籍
计算属性：数据变幻，尽在掌控
计算属性如同魔法师，能将静止的数据变为灵动的精灵。当数据稍有风吹草动，它便瞬间更新，让你的点餐页面时刻保持活泼灵动。
侦听器：耳听八方，及时响应
侦听器就像贴心的管家，时刻关注着数据的变化。一旦察觉数据异动，它便飞奔而来，为你提供及时的反馈，助你把握每一次点餐契机。
美食点餐，指尖轻舞
今天，我们携手 Vue3 的计算属性和侦听器，打造一个便捷的点餐页面，让你一键点餐，轻松化身美食点单大师！
第一步：开启 Vue3 之旅
- 打开你心爱的代码编辑器，创建一个崭新的 Vue3 项目。
- 安装 Vue3 及其伙伴。
- 创建一个名为
App.vue的文件，这是我们的主战场。
第二步：引入计算属性和侦听器
- 在
App.vue中，请来计算属性和侦听器的帮忙：
import { ref, computed, watch } from 'vue'
第三步：数据模型的塑造
- 定义
menu数据模型，容纳你餐厅的美味佳肴。 - 定义
order数据模型，记录食客的点餐清单。
第四步：计算总价
- 使用计算属性算出总价：
const totalPrice = computed(() => {
let total = 0;
for (const item of order.value) {
total += item.price * item.quantity;
}
return total;
})
第五步：订单变化的侦听
- 使用侦听器，时刻关注订单的变化：
watch(order, (newValue, oldValue) => {
// 订单一变动，就更新总价
totalPrice.value = 0;
for (const item of newValue) {
totalPrice.value += item.price * item.quantity;
}
})
第六步：点餐页面的绘制
- 在
App.vue中，勾勒出点餐页面的蓝图：
<template>
<div>
<h1>美食点餐</h1>
<ul>
<li v-for="item in menu" :key="item.id">
{{ item.name }}：{{ item.price }} 元
<button @click="addToCart(item)">点餐</button>
</li>
</ul>
<div>
总价：{{ totalPrice }} 元
</div>
</div>
</template>
第七步：点餐功能的实现
- 在
App.vue中，赋予点餐功能生命：
methods: {
addToCart(item) {
// 将美食佳肴加入订单
order.value.push(item)
}
}
第八步：项目启动
- 运行 Vue3 项目，在浏览器中打开点餐页面。
- 随心所欲地点击菜单，点亮你的美食盛宴。
- 总价会实时更新，助你掌控消费节奏。
结语
计算属性和侦听器是 Vue3 中的强大帮手，它们让你轻松实现数据绑定和变化监听，构建出更加高效、灵活的应用。不妨一试，让你的点餐页面更上一层楼！
常见问题解答
- 计算属性和侦听器有什么区别？
计算属性根据其他数据计算新的数据，侦听器则在数据变化时触发函数。 - 如何使用侦听器侦听多个数据源？
可以使用watchEffect函数，其中包含一个回调函数，该回调函数接收所有相关数据的最新值。 - 如何防止计算属性被重复计算？
可以通过使用memoize函数来缓存计算结果，避免重复计算。 - 如何防止侦听器被重复触发？
可以通过使用debounce或throttle函数来延迟或限制侦听器的触发频率。 - 计算属性和侦听器在大型应用中会带来性能问题吗？
只要合理使用，它们通常不会造成性能问题。不过，如果计算属性或侦听器涉及大量数据或复杂计算，则需要考虑优化。
