hooks

hooks 实质 就是 js或ts文件

hooks 命名 一般是 use+功能 

hooks 就是 将服务于 同一功能的数据、方法、钩子函数等 放在同一js或ts文件中

定义 hooks.ts文件   usePerson.ts

import {type Persons} from '../types'
import {reactive} from "vue";

// reactive<Persons>  响应式数据 定义 泛型
export default function () {
    const personList = reactive<Persons>([{id: 1, name: "df1", age: 12},
        {id: 2, name: "df2", age: 12}, {
            id: 3,
            name: "df3",
            age: 12,
            x: 9
        }])
    return {
        personList
    }
}

引入hooks文件

<script setup lang="ts" name="lop">
//引入 hooks文件
import usePerson from "../hooks/usePerson.ts";
// 解构里面的数据
const {personList} = usePerson()

</script>

使用

 <ul>
    <li v-for="person in personList" :key="person.id">{{ person.name }}--{{ person.age }}</li>
  </ul>