测试

<template>
  <div id="app">
    <div class="todo-main">
      <input type="text" v-model="inputVal" />
      <button @click="addVal">添加</button>
      <ul>
        <li v-for="(item, index) in todolist" :key="index">
          {{ item }}
          <button @click="deleteVal(index)">删除</button>
        </li>
      </ul>
      共有:{{ todolist.length }}条数据
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs,onMounted } from "vue";
interface DataProps {
  todolist: string[];
  inputVal: string;
  deleteVal: (index: number) => void;
  addVal: () => void;
}
export default {
  setup() {
    const data: DataProps = reactive({
      inputVal: "",
      todolist: ["参加需求评审会", "完善新增逻辑"],
      addVal: () => {
        data.todolist.push(data.inputVal);
        data.inputVal = "";
      },
      deleteVal: (index: number) => {
        data.todolist.splice(index, 1);
      },
    });
    const refData = toRefs(data);
    onMounted(() => console.log('组件已加载！'))
    return {
      ...refData,
    };
  },
};
</script>