onmounted 是 vue 中的组件挂载生命周期钩子,其作用是在组件挂载到 dom 后执行初始化操作,例如获取 dom 元素的引用、设置数据、发送 http 请求、注册事件监听器等。它在组件挂载时仅调用一次,如果需要在组件更新后或销毁前执行操作,可以使用其他生命周期钩子。
Vue 中 onMounted 的作用
onMounted 是 Vue 生命周期钩子之一,表示组件被挂载到 DOM 后调用。其主要作用是:
执行与组件挂载相关的操作
在组件挂载到 DOM 后,可以执行一些初始化操作,例如:
- 获取 DOM 元素的引用
- 设置数据或属性
- 发送 HTTP 请求
- 注册事件监听器
完成数据请求或异步操作
如果需要在组件挂载后获取数据或执行需要时间的操作,可以在 onMounted 钩子中进行。这确保了数据或操作完成后,组件能够做出相应的响应。
例如:
<script>
import { onMounted } from '<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15721.html" target="_blank">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>
注意:
- onMounted 钩子只在组件挂载时调用一次。
- 如果需要在组件更新后执行操作,可以使用 onUpdated 钩子。
- 如果需要在组件销毁前执行清理操作,可以使用 onBeforeUnmount 钩子。