解决双向绑定-hooks

 // data.list.push(data.addList);

  data.list.push({...data.addList, id: data.list.length + 1})

---hooks

--封装的todo-hooks

import { ref,reactive } from "vue"; // 方法
import type { ITodList } from '../type/todoList' // 类型

interface IData {
    list:ITodList[],
    addList:ITodList
}

// 参数类型约束
const data = reactive<IData>({
    list:[],
    addList:{
      title:"",
      type:false,
      id:0
    }
  })
const addFun = () => {
    // data.list.push(data.addList);
    data.list.push({...data.addList, id: data.list.length + 1})
}

export default ()=>({
    data,
    addFun
})
// hooks是一个函数

--在具体页面使用

<script setup lang="ts">
import { ref, reactive } from 'vue'
import  todoList from './todoList'
const {data,addFun} = todoList()--更符合实际写法

interface dataType{
  title:string,
  type:boolean,
  id:number
}


 
</script>

<template>
  <div>
    <div class="add-box">
        <input type="text" v-model="data.addList.title" />
        <button @click="addFun">添加</button>
    </div>
    <div>
      <table> 
        <tr>
          <th> id</th>
          <th>标题</th>
          <th>种类</th>
        </tr>
        <tr v-for="i in data.list" :key="i.id">
          <td>{{i.id}}</td>
          <td>{{i.title}}</td>
          <td>{{i.type}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style scoped>
 
</style>