自定义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 }
大概就是这么个结构。