Vue3 弹窗打开时获取后端数据：使用 onMounted 钩子函数

在Vue3中，你可以使用生命周期钩子函数"onMounted"来在弹窗打开时发送axios请求获取数据。每次打开弹窗时，都会重新获取数据。\n\n首先，确保你已经安装了axios，并在组件中导入axios：\n\njavascript\nimport axios from \'axios\';\n\n\n然后，在组件中使用"onMounted"钩子函数发送axios请求：\n\njavascript\nimport { onMounted, ref } from \'vue\';\n\nexport default {\n setup() {\n const data = ref([]);\n\n onMounted(async () => {\n try {\n const response = await axios.get(\'your-backend-api-url\');\n data.value = response.data;\n } catch (error) {\n console.error(error);\n }\n });\n\n return {\n data\n };\n }\n}\n\n\n上面的代码中，我们使用"ref"函数创建了一个响应式的数据"data"，并在"onMounted"钩子函数中发送axios请求。请求成功后，将返回的数据赋值给"data.value"。\n\n最后，在模板中使用"data"即可获取到后端返回的数据：\n\nhtml\n<template>\n <div>\n <button @click=\"openModal\">打开弹窗</button>\n <div v-if=\"showModal\">\n <!-- 弹窗内容 -->\n <div v-for=\"item in data\" :key=\"item.id\">{{ item.name }}</div>\n </div>\n </div>\n</template>\n\n\n在上面的例子中，我们使用了一个"showModal"变量来控制弹窗的显示与隐藏。你可以根据自己的需求来设置弹窗的触发方式和显示逻辑。每次打开弹窗时，都会重新获取数据并更新"data"的值，从而实现每次打开都重新获取数据的效果。