封装功能模块，增加代码复用

<template>
  <div>
    <ul>
      <li v-for="(item, i) in stuList" :key="i">
        {{ item.id }}--{{ item.name }}
      </li>
    </ul>
    <input type="text" v-model="nameMsg" />
    <button @click="addStu">新增</button>
  </div>
</template>

<script>
// 1. 把数据封装到 stuList.js
import stuListFn from "../assets/composition/stuList";
// 2. 把方法封装到 stuAdd.js
import stuAddFn from "../assets/composition/stuAdd";

export default {
  setup() {
    // 默认数据
    var stuList = stuListFn();
    // 新增数据
    var { nameMsg, addStu } = stuAddFn(stuList);
    return {
      stuList,
      nameMsg,
      addStu
    };
  }
};
</script>

import { reactive } from "vue";

export default function stuListFn() {
  //1．使用reactive定义响应式学生列表
   var stuList = reactive([
    { id: 1, name: "小明" },
    { id: 2, name: "小红" },
    { id: 3, name: "小强" }
  ]);
   return stuList
}

export default stuListFn

import { ref } from "vue";

export default function stuAddFn(stuList) {
  var nameMsg = ref("");
  var addStu = () => {
    stuList.push({ id: stuList.length + 1, name: nameMsg.value });
    nameMsg.value = "";
  };
  return {
    nameMsg,
    addStu
  };
}