现在我们学习组合API的内容已经不少了，我们用它来重写一下我们之前写过的一个小例子：超级英雄管理系统
我们新建一个项目，把App.vue中没用的内容都删除掉

<template>
  <h1>超级英雄管理系统</h1>
</template>

<script>
export default {
  name: 'App',
  setup() {
  },
}
</script>

1.展示超级英雄列表

定义一个heroList，然后用v-for把它循环出来，相信大家已经很熟悉了，我就直接上代码了

<template>
  <h1>超级英雄管理系统</h1>
  <ul>
    <li v-for="item in heroList" :key="item">
      <span>{{ item }}</span>
    </li>
  </ul>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const heroList = reactive(['钢铁侠', '蜘蛛侠', '美国队长'])
    return {
      heroList,
    }
  },
}
</script>

2.使用计算属性显示超级英雄的总数

const total = computed(() => {
   return heroList.length
})

<div>现在注册在案的超级英雄有{{ total }}位</div>

当然需要在setup中return total这个数据了，我这里就不写了
现在的结果是

3.添加超级英雄弹框
我们添加一个按钮，点击后出现弹框，在弹框中输入超级英雄的名字，然后点击确定就可以添加了
js逻辑部分

    const showAddModal = ref(false)     // 是否显示弹框
    const addHeroName = ref('')         // 名字输入框的值
    const onAddHeroClick = () => {      // 点击添加超级英雄按钮回调
      showAddModal.value = true
    }
    const onAddHeroSubmit = () => {     // 点击确定按钮的回调
      heroList.push(addHeroName.value)
      showAddModal.value = false
      addHeroName.value = ''
    }

    return {
      heroList,
      total,
      showAddModal,
      addHeroName,
      onAddHeroClick,
      onAddHeroSubmit,
    }

template部分

  <button @click="onAddHeroClick">添加超级英雄</button>
  <div class="add-modal" v-show="showAddModal">
    <div class="add-box">
      <input type="text" v-model="addHeroName" />
      <br />
      <button @click="onAddHeroSubmit">确定</button>
    </div>
  </div>

这样添加功能就完成了

4.删除超级英雄

js部分

    const onDel = (index) => {
      heroList.splice(index, 1)
    }

    return {
      heroList,
      total,
      showAddModal,
      addHeroName,
      onAddHeroClick,
      onAddHeroSubmit,
      onDel,     // 新增
    }

template部分

    <li v-for="(item, index) in heroList" :key="item">
      <span>{{ item }}</span>
      <span class="del" @click="onDel(index)">删除</span>
    </li>

这样就完成了我们的超级英雄管理系统的基本功能了
全部代码

<template>
  <h1>超级英雄管理系统</h1>
  <ul>
    <li v-for="(item, index) in heroList" :key="item">
      <span>{{ item }}</span>
      <span class="del" @click="onDel(index)">删除</span>
    </li>
  </ul>
  <div>现在注册在案的超级英雄有{{ total }}位</div>
  <button @click="onAddHeroClick">添加超级英雄</button>
  <div class="add-modal" v-show="showAddModal">
    <div class="add-box">
      <input type="text" v-model="addHeroName" />
      <br />
      <button @click="onAddHeroSubmit">确定</button>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 展示部分
    const heroList = reactive(['钢铁侠', '蜘蛛侠', '美国队长'])
    const total = computed(() => {
      return heroList.length
    })

    // 添加部分
    const showAddModal = ref(false)
    const addHeroName = ref('')
    const onAddHeroClick = () => {
      showAddModal.value = true
    }
    const onAddHeroSubmit = () => {
      heroList.push(addHeroName.value)
      showAddModal.value = false
    }

    // 删除部分
    const onDel = (index) => {
      heroList.splice(index, 1)
    }

    return {
      heroList,
      total,
      showAddModal,
      addHeroName,
      onAddHeroClick,
      onAddHeroSubmit,
      onDel,
    }
  },
}
</script>
<style scoped>
.add-modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.add-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25vh;
  background-color: #fff;
  text-align: center;
  padding-top: 15vh;
}
.del {
  margin-left: 5px;
  color: red;
  cursor: pointer;
}
</style>

现在我们使用组合API的优势稍微显示出来了，把同一业务逻辑的代码放在了一起，
展示部分、添加部分和删除部分分块写好，方便开发与维护
而不是像以前一样数据写在一起、方法写在一起了

5.把逻辑代码分到不同的文件中

现在我们写的js代码也没多少，看着也没什么问题，但是在实际开发中，一个vue文件中的逻辑代码可能上千行，维护起来就特别麻烦，所以我们要把展示、添加、删除的逻辑分别放到不同的文件中
在src目录下建立一个文件夹hero，用于放我们的独立文件，然后新建三个文件

useShow
useAdd
useDel

根据惯例或者说从react那学来的方式，这些文件我们以use开头
把我们相关模块的代码放到文件中

useShow.js

import { reactive, computed } from 'vue'
const heroList = reactive(['钢铁侠', '蜘蛛侠', '美国队长'])
const total = computed(() => {
  return heroList.length
})

export { heroList, total }

useAdd.js

import { ref } from 'vue'
function useAdd(heroList) {
  const showAddModal = ref(false)
  const addHeroName = ref('')
  const onAddHeroClick = () => {
    showAddModal.value = true
  }
  const onAddHeroSubmit = () => {
    heroList.push(addHeroName.value)
    showAddModal.value = false
    addHeroName.value = ''
  }
  return {
    showAddModal,
    addHeroName,
    onAddHeroClick,
    onAddHeroSubmit,
  }
}

export default useAdd

useDel.js

function useDel(heroList) {
  const onDel = (index) => {
    heroList.splice(index, 1)
  }
  return {
    onDel,
  }
}

export default useDel

最后在App.vue中使用

import { heroList, total } from './hero/useShow'
import useAdd from './hero/useAdd'
import useDel from './hero/useDel'
export default {
  name: 'App',
  setup() {
    const {
      showAddModal,
      addHeroName,
      onAddHeroClick,
      onAddHeroSubmit,
    } = useAdd(heroList)
    const { onDel } = useDel(heroList)

    return {
      heroList,
      total,
      showAddModal,
      addHeroName,
      onAddHeroClick,
      onAddHeroSubmit,
      onDel,
    }
  },
}
</script>

这样看上去是更麻烦了，但是对于复杂的组件来说，这样拆分以后，在维护的时候不管是读代码、还是改代码都方便了。
这节课就到这里了。