vue中onmounted作用-Vue.js-PHP中文网

vue中onmounted作用

下次还敢

发布： 2024-05-09 14:51:19

原创

2972人浏览过

onMounted 是 Vue 中的组件挂载生命周期钩子，其作用是在组件挂载到 DOM 后执行初始化操作，例如获取 DOM 元素的引用、设置数据、发送 HTTP 请求、注册事件监听器等。它在组件挂载时仅调用一次，如果需要在组件更新后或销毁前执行操作，可以使用其他生命周期钩子。

vue中onmounted作用

Vue 中 onMounted 的作用

onMounted 是 Vue 生命周期钩子之一，表示组件被挂载到 DOM 后调用。其主要作用是：

执行与组件挂载相关的操作

在组件挂载到 DOM 后，可以执行一些初始化操作，例如：

立即学习“前端免费学习笔记（深入）”；

火山写作

字节跳动推出的中英文AI写作、语法纠错、智能润色工具，是一款集成创作、润色、纠错、改写、翻译等能力的中英文 AI 写作助手。

105

查看详情

获取 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>

登录后复制

注意：