vue mounted用法

<template>
  <div id="app">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  mounted() {
    // 当组件实例被挂载后立即调用，此时 el 被新创建的 vm.$el 替换。
    // 如果你想要在挂载后直接访问 DOM 元素，应该在这个钩子中操作。
    console.log('Component has been mounted.')
    this.init()
  },
  methods: {
    init() {
      // 初始化逻辑，例如获取数据、设置定时器等
      console.log('Initialization logic here.')
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

解释说明：

• mounted 是 Vue 的生命周期钩子之一，当组件实例被挂载后立即调用。此时，组件的 DOM 已经被渲染到页面中，可以在这里进行 DOM 操作或初始化逻辑。
• 在 mounted 钩子中，我们可以通过 this 访问到组件实例，也可以通过 this.$el 访问到组件的根 DOM 元素。
• 示例代码中，在 mounted 钩子中调用了 init 方法，用于执行一些初始化逻辑，比如获取数据或设置定时器等。