【Vue系列】Vue3新引入的composition API

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

关于Vue3组合式API的好处，我们可以通过一个例子来感受。

首先我们使用Vue2.x的形式来实现一个简单功能

需求：

1.当点击商品列表项时删除该项

2.当点击添加按钮时，会根据表单中数据添加一行到商品列表中

代码如下：

<template>
  <div class="wrap">
    <section>
      <h6>商品列表</h6>
      <table>
        <thead>
          <td>序号</td>
          <td>名称</td>
          <td>单价</td>
          <td>折扣</td>
          <td>折后价</td>
        </thead>
        <tbody>
          <tr
            v-for="(fruit, index) in fruits"
            :key="fruit.id"
            @click="remove_item(index)"
          >
            <td>{{ fruit.id }}</td>
            <td>{{ fruit.fruit_name }}</td>
            <td>{{ fruit.price }}</td>
            <td>{{ fruit.discount }}</td>
            <td>{{ (fruit.price * fruit.discount).toFixed(2) }}元/斤</td>
          </tr>
        </tbody>
      </table>
      <br />
    </section>
    <section>
      <h6>如果想添加一个商品，请输入：</h6>
      <form>
        商品序号：<input type="text" v-model="f.id" /><br />
        商品名称：<input type="text" v-model="f.fruit_name" /><br />
        单价价格：<input type="text" v-model="f.price" /><br />
        打折折扣：<input type="text" v-model="f.discount" /><br />
        <button @click="add_item">添加</button>
      </form>
    </section>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      fruits: [
        { id: 1, fruit_name: "apple", price: 10, discount: 0.8 },
        { id: 2, fruit_name: "banana", price: 3, discount: 0.7 },
        { id: 3, fruit_name: "orange", price: 5, discount: 0.5 },
        { id: 4, fruit_name: "durain", price: 50, discount: 0.8 },
      ],
      f: {
        id: 5,
        fruit_name: "",
        price: "",
        discount: "",
      },
    };
  },
  methods: {
    remove_item(index) {
      this.fruits = this.fruits.filter((item, key) => index !== key);
    },
    add_item(e) {
      e.preventDefault();
      let temp = Object.assign({}, this.f);
      this.fruits.push(temp);
      this.f.id = this.fruits.length + 1;
      this.f.fruit_name = "";
      this.f.price = "";
      this.f.discount = "";
    },
  },
};
</script>

简单加点样式

.wrap{
  width: 600px;
  margin: 10px auto;
  display: flex;
  justify-content:space-around;
  background-color:rgb(253, 247, 247);
  border-radius:4px;
}
.wrap table thead{
  background-color: deepskyblue;
  font-weight: bold;
  font-size: 0.9em;
}
.wrap table tr:nth-of-type(2n+1){
  background-color:pink;
}
.wrap form{
  font-size: 0.9em;
}
.wrap button{
  margin-top: 10px;
  width: 100%;
  color: rgb(224, 43, 31);
  font-weight: 700;
}

显示结果如下

上述例子中，我们可以看到，使用2.x的option API，每当实现一个功能，都会在data中添加一些数据，同时在methods中添加业务逻辑。这里还好只有两个简单的功能，但实际工作中，当添加很多很多功能时，要找到某个功能对应数据和业务逻辑就变得非常困难，并且业务逻辑不一定就在methods中，还可能分散在computed、watch等选配项中。所以vue3.0中引入了composition API，专门用于解决功能、数据和业务逻辑分散的问题，使项目更益于模块化开发以及后期维护