Vue3+Typescript列表内容监听和fetch函数使用的注意事项
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
interface Item {
id: number;
name: string;
}
export default defineComponent({
setup() {
const items = ref<Item[]>([]);
const url = 'https://api.example.com/items';
const fetchItems = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
items.value = await response.json();
} catch (error) {
console.error('Fetch error:', error);
}
};
onMounted(fetchItems);
// 监听items数组的变化,如果需要可进一步实现
watch(items, (newItems, oldItems) => {
// 这里可以实现具体的监听逻辑
});
return { items };
}
});
</script>
这个代码实例展示了如何在Vue 3和TypeScript中使用fetch
函数获取数据,并在组件加载时将数据赋值给列表。同时,它也演示了如何使用watch
来监听响应式数据的变化。这是一个简洁且有效的示例,适合作为学习和实践中的参考。
评论已关闭