onMounted 是 Vue 中的组件挂载生命周期钩子，其作用是在组件挂载到 DOM 后执行初始化操作，例如获取 DOM 元素的引用、设置数据、发送 HTTP 请求、注册事件监听器等。它在组件挂载时仅调用一次，如果需要在组件更新后或销毁前执行操作，可以使用其他生命周期钩子。
Vue 中 onMounted 的作用
onMounted 是 Vue 生命周期钩子之一，表示组件被挂载到 DOM 后调用。其主要作用是：
执行与组件挂载相关的操作
在组件挂载到 DOM 后，可以执行一些初始化操作，例如：
立即学习“前端免费学习笔记（深入）”；
- 获取 DOM 元素的引用
- 设置数据或属性
- 发送 HTTP 请求
- 注册事件监听器
完成数据请求或异步操作
如果需要在组件挂载后获取数据或执行需要时间的操作，可以在 onMounted 钩子中进行。这确保了数据或操作完成后，组件能够做出相应的响应。
例如：
<code class="javascript"><script>
import { onMounted } from 'vue'
export default {
onMounted() {
// 获取 DOM 元素的引用
const el = this.$refs.myElement
// 设置数据
this.data = 'Hello world!'
// 发送 HTTP 请求
fetch('https://example.com/api/data').then((response) => {
this.data = response.data
})
// 注册事件监听器
window.addEventListener('resize', this.onResize)
},
methods: {
onResize() {
// 窗口大小改变时响应
}
}
}
</script></code>注意：
- onMounted 钩子只在组件挂载时调用一次。
- 如果需要在组件更新后执行操作，可以使用 onUpdated 钩子。
- 如果需要在组件销毁前执行清理操作，可以使用 onBeforeUnmount 钩子。
