Vue3 计算属性和侦听器实战（computed、watch）——简易点餐页面

---

📋前言

这篇文章记录一下 Vue3 计算属性和侦听器 （computed、watch） 实战的内容，这篇文章我们在有计算属性和侦听器的基础上，我们来制作一个简易点餐页面，接下来我们一起来从零到一开始制作。

计算属性和侦听器相关文章推荐：
深入与浅谈 Vue 中计算属性和侦听器的区别和使用（Vue3版本为例）
浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化

---

🎯项目介绍

在创建项目之前，我们先简单看一下这次项目需要完成的页面内容，如下图。主页列表罗列着菜品名称、图片介绍，用户通过单机添加按钮，实现菜品添加的点餐功能。最后在页面的下方会显示用户点餐详情以及总数和总价，同时可以通过单机删除按钮，实现菜品的删除的取消点餐功能。

---

🎯项目创建

要创建一个 Vite 项目，需要先安装 Vite。可以使用 npm 或者 yarn 进行安装。在命令行中输入：

npm install vite -g  # 全局安装 vite
或者
yarn global add vite  # 全局安装 vite
1
2
3

然后通过以下命令创建一个 Vite 项目，名称是 vite-demo。

npm init vite@latest vite-demo
1

选择 Vue 。

然后选择 TypeScript 。

默认生成的项目结构如下，然后在控制台输入 npm install 安装相关依赖 （主要选择当前文件夹）。

最后输入 npm run dev 启动项目，出现如下页面表示运行成功。


到此项目创建完成，接下来我们来看看具体代码。

---

🎯代码分析

我们根据上面项目介绍的图片展示，点餐页面分为三个部分，即菜品列表、点餐列表以及消费价格。可以先根据这个页面设计来实现代码的布局。在项目中的 App.vue 文件中，修改 template 模板部分的代码。

<template>
  <div class="food-container">
    <div class="food-wrap">
      
      <ul class="food-main">
        <li v-for="(item, index) in foodList" :key="item.name">
          <img :src="item.url" class="food-image"/>
          <label>
            <span>{{item.name}}span>
          label>
          <button class="btn btn-add" @click="orderFood(index)">添加button>
          <span class="food-price">价格 {{item.price}} 元/份span>
        li>
      ul>
      
      <div class="food-order">
        <ul class="order-main">
          <li class="order-item" v-for="(item, index) in orderList" :key="item.name">
            <label>{{item.name}}label>
            <div>
              <span class="order-count"> X {{item.count}}span>
              <button class="btn btn-delete" @click="removeFood(index)">删除button>
            div>
          li>
        ul>
      div>
      
      <div class="food-total-price">
        <span>
          <span class="total-count">已点 {{totalCount}} 份餐span>
          <span>共计 <b>{{total}}b> 元span>
        span>
      div>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这段代码里，使用 v-for 指令分别渲染菜品列表和点餐列表。添加按钮和删除按钮分别绑定 orderFood() 和 removeFood() 方法。最后通过 totalCount 的值是否为 0 来显示点餐份数。

接下来我们来实现点餐页面的业务逻辑，修改 App.vue 文件中的 script 部分代码。

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
// 菜品接口类
interface Food {
  name: string;
  url: string;
  price: number;
}

// 订单接口类
interface Order {
  name: string;
  price: number;
  count: number;
}

// 菜品数据列表
const foodList = reactive<Food[]>([
  { name: '宫保鸡丁', url: '/src/assets/gbjd.png', price: 12.0 },
  { name: '鱼香肉丝', url: '/src/assets/yxrs.png', price: 17.0 },
  { name: '红烧排骨', url: '/src/assets/hspg.png', price: 20.0 },
]);

// 订单数据列表
const orderList = reactive<Order[]>([]);

// 总价
const total = ref(0);

// 总个数
const totalCount = computed((): number => {
  let count = 0;
  orderList.forEach((item: Order) => {
    count += item.count;
  })
  return count;
});

// 点餐函数
const orderFood = (index: number):void => {
  // 查看当前菜品是否已经被点
  const isOrdered = orderList.filter((item: Order): boolean => {
    return item.name === foodList[index].name;
  });
  if (isOrdered.length) {
    isOrdered[0].count += 1;
  } else {
    orderList.push({
      name: foodList[index].name,
      price: foodList[index].price,
      count: 1,
    })
  }
};

// 取消点餐操作
const removeFood = (index: number):void => {
  if (orderList[index].count > 0) {
    orderList[index].count -= 1;
  }
  if (orderList[index].count === 0) {
    orderList.splice(index, 1);
  }
};

// 监听订单列表变化
watch(
  () => orderList,
  () => {
    total.value = 0;
    orderList.forEach((order: Order) => {
      total.value += order.count * order.price;
    });
  },
  {deep:true}
);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

这里首先分别定义了 Food 和 Order 两个类型。然后初始化 foodList、orderList 和 total 变量，对应的菜品列表、点餐列表和消费总价。接下来使用一个 totalCount 计算属性统计总点餐份数。orderFood() 方法和 removeFood() 方法分别对应模板的添加和删除按钮。最后使用侦听器属性，检测 orderList 对象的变化。通过 orderList 数据变化来计算总点餐花费。这样，一个简单的点餐页面就完成了，运行效果如下。

---

🎯完整代码（含 CSS 代码）

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
// 菜品接口类
interface Food {
  name: string;
  url: string;
  price: number;
}

// 订单接口类
interface Order {
  name: string;
  price: number;
  count: number;
}

// 菜品数据列表
const foodList = reactive<Food[]>([
  { name: '宫保鸡丁', url: '/src/assets/gbjd.png', price: 12.0 },
  { name: '鱼香肉丝', url: '/src/assets/yxrs.png', price: 17.0 },
  { name: '红烧排骨', url: '/src/assets/hspg.png', price: 20.0 },
]);

// 订单数据列表
const orderList = reactive<Order[]>([]);

// 总价
const total = ref(0);

// 总个数
const totalCount = computed((): number => {
  let count = 0;
  orderList.forEach((item: Order) => {
    count += item.count;
  })
  return count;
});

// 点餐函数
const orderFood = (index: number):void => {
  // 查看当前菜品是否已经被点
  const isOrdered = orderList.filter((item: Order): boolean => {
    return item.name === foodList[index].name;
  });
  if (isOrdered.length) {
    isOrdered[0].count += 1;
  } else {
    orderList.push({
      name: foodList[index].name,
      price: foodList[index].price,
      count: 1,
    })
  }
};

// 取消点餐操作
const removeFood = (index: number):void => {
  if (orderList[index].count > 0) {
    orderList[index].count -= 1;
  }
  if (orderList[index].count === 0) {
    orderList.splice(index, 1);
  }
};

// 监听订单列表变化
watch(
  () => orderList,
  () => {
    total.value = 0;
    orderList.forEach((order: Order) => {
      total.value += order.count * order.price;
    });
  },
  {deep:true}
);

script>

<template>
  <div class="food-container">
    <div class="food-wrap">
      
      <ul class="food-main">
        <li v-for="(item, index) in foodList" :key="item.name">
          <img :src="item.url" class="food-image"/>
          <label>
            <span>{{item.name}}span>
          label>
          <button class="btn btn-add" @click="orderFood(index)">添加button>
          <span class="food-price">价格 {{item.price}} 元/份span>
        li>
      ul>
      
      <div class="food-order">
        <ul class="order-main">
          <li class="order-item" v-for="(item, index) in orderList" :key="item.name">
            <label>{{item.name}}label>
            <div>
              <span class="order-count"> X {{item.count}}span>
              <button class="btn btn-delete" @click="removeFood(index)">删除button>
            div>
          li>
        ul>
      div>
      
      <div class="food-total-price">
        <span>
          <span class="total-count">已点 {{totalCount}} 份餐span>
          <span>共计 <b>{{total}}b> 元span>
        span>
      div>
    div>
  div>
template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.btn {
  display: inline-block;
  padding: 8px 10px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.btn-add {
  color: #fff;
  background-color: #0d6efd;
  border: none;
}
.btn-delete {
  color: #fff;
  background-color: #dc3545;
  border: none;
}
.btn-delete:hover {
  color: #fff;
  background-color: #bb2d3b;
}
.btn-add:hover {
  color: #fff;
  background-color: #0b5ed7;
}

.food-container {
  width: 600px;
  margin: 40px auto;
}
.food-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.food-price {
  float: right;
  margin-right: 10px;
}
.food-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0px;
}

.food-image {
  float: left;
  height: 100%;
}
.order-main {
  margin-left: 0px;
  padding: 0px;
}

.order-main li {
  display: flex;
}
.order-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
}
.food-main li label {
  float: left;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
  font-weight: bold;
  margin-left: 10px;
}

.food-main li button {
  float: right;
  margin-top: 3px;
}
li:before {
  content: initial;
}
li:last-child {
  border-bottom: none;
}

.total-count {
  font-size: 0.8rem;
  color: #6c757d;
  margin-right: 21px;
}
.food-main li:hover {
  background-color: #ddd;
}
.order-count {
  margin-right: 30px;
}

.food-order {
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}
.food-order label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.food-total-price {
  display: flex;
  justify-content: end;
}

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253

---

📝最后

到此文章结束，这就是 Vue3 计算属性和侦听器 （computed、watch） 实战的全部内容了，通过这篇文章我们从零到一制作了一个简易点餐页面，这样可以提高我们使用计算属性和侦听器的熟练程度。