vue3 里页面mounted怎么写

在 Vue3 中，页面的 `mounted` 钩子函数被废弃了，取而代之的是 `onMounted` 函数。如果你想监听页面加载完成的事件，可以在 `setup` 函数中使用 `onMounted` 函数。

如果你希望在页面加载完成后执行一些操作，可以在页面组件的 `setup` 函数中使用 `onMounted` 函数，如下所示：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('页面加载完成');
      // 可以在这里进行一些 DOM 操作或者发起异步请求等操作
    });
  }
}
</script>

在 `setup` 函数中使用 `onMounted` 函数来注册页面加载完成的事件处理函数。当页面被加载到浏览器中并完成渲染后，注册的函数会被自动调用，这时可以在控制台中看到 `页面加载完成` 的输出。

相关问题

vue3 mounted怎么写

在 Vue3 中，可以使用 `onMounted` 函数来监听页面加载完成的事件。

使用方式如下：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件加载完成');
      // 可以在这里进行一些 DOM 操作或者发起异步请求等操作
    });
  }
}
</script>

在 `setup` 函数中使用 `onMounted` 函数来注册组件加载完成的事件处理函数。当组件被加载到页面中并完成渲染后，注册的函数会被自动调用，这时可以在控制台中看到 `组件加载完成` 的输出。

vue3 选项式mounted()

### Vue3 选项式 API 中 `mounted` 生命周期钩子

在 Vue3 的选项式 API 中，`mounted` 钩子用于表示组件挂载完成后执行的逻辑。此时，虚拟 DOM 已经渲染成真实 DOM 并插入到页面中[^2]。

#### 使用方法

可以直接在组件定义对象内声明 `mounted` 属性，并为其赋值为一个回调函数，在该函数内部可以访问真实的 DOM 元素以及进行初始化操作等[^1]。

export default {
    data() {
        return {
            message: 'Hello!'
        }
    },
    mounted() {
        console.log('Component has been mounted.')
        this.init()
    },
    methods: {
        init() {
            // 初始化代码, 如获取数据、设置定时器等
            fetch('/api/data')
                .then(response => response.json())
                .then(data => (this.message = data))
        }
    }
}

此段代码展示了当组件成功挂载之后会触发 `init()` 方法来发起网络请求并更新视图中的消息内容[^3]。