Vue3 Modal 重新调用 onMounted 实现方法 - 提交或关闭后刷新数据

{"title":"Vue3 Modal 重新调用 onMounted 实现方法 - 提交或关闭后刷新数据","description":"本文介绍了在 Vue3 中如何使用 watch 监听 modal 的变化，并在 modal 打开或关闭时重新调用 onMounted 函数，实现数据刷新。","keywords":"Vue3, modal, onMounted, 刷新数据, watch, 监听变化, 提交, 关闭","content":"在 Vue 3 中，可以使用 `watch` 来监听 `modal` 的变化，当 `modal` 变化时，重新调用 `onMounted` 的逻辑。具体实现如下：\n\njavascript\nimport { ref, watch, onMounted } from 'vue';\n\nexport default {\n setup() {\n const modal = ref(false);\n\n const onModalChange = () => {\n if (modal.value) {\n onMounted();\n }\n };\n\n watch(modal, onModalChange);\n\n const onMounted = () => {\n console.log('Modal mounted');\n };\n\n return {\n modal,\n onMounted,\n };\n },\n};\n\n\n在上述代码中，首先定义了一个 `modal` 的响应式变量，并定义了 `onModalChange` 函数来监听 `modal` 的变化。当 `modal` 变为 `true` 时，即打开 modal 时，调用 `onMounted` 函数。\n\n然后使用 `watch` 来监听 `modal` 的变化，并在变化时调用 `onModalChange` 函数。\n\n最后，定义了 `onMounted` 函数的具体实现，这里只是简单地打印了一条信息。你可以根据实际需求来编写具体的逻辑。\n\n这样，当你打开或关闭 modal 时，会重新调用 `onMounted` 函数。"}