vue3 自定义hook

自定义hook的优势：复用代码。让setup中的逻辑更清晰易懂

1.首先先再public新建一个模拟数据JSON文件 test.json

{
    "list": [
        {
            "name": "王晓阳",
            "age": 17,
            "sex": "女"
        },
        {
            "name": "李莉",
            "age": 18,
            "sex": "女"
        },
        {
            "name": "张小雨",
            "age": 19,
            "sex": "女"
        },
        {
            "name": "王晨阳",
            "age": 20,
            "sex": "男"
        }
    ]
}

2. .vue文件内容

<template>
  <ul v-for="item in obj.list " :key="item.id" style="list-style: none;">
    <!-- {{ item }} -->
    <li>姓名：{{ item.name }}</li>
    <li>性别：{{ item.sex }}</li>
    <li>年龄：{{ item.age }}</li>
  </ul>
</template>

<script setup>
// 引入AboutView.js
import { getInfo } from '../module/AboutView'
const obj = getInfo()

</script>

3.src文件夹下新建module文件夹里面的js文件内容

import { reactive, onMounted } from 'vue'
import axios from 'axios'

function getInfo() {
    const obj = reactive({
        list: []
    })
    onMounted(() => {
        axios.get("./test.json").then(res => {
            console.log(res.data.list);
            obj.list = res.data.list 
        })
    })
    return obj
}

export { getInfo }

大概就是这么个结构。