当前位置：首页 > news >正文

vue3 如何使用 mounted

news 2025/7/10 2:25:37

vue3 如何使用 mounted
在 Vue 3 中，mounted 生命周期钩子用于当组件被挂载到 DOM 中后执行一些操作。

这个钩子非常适合用来执行那些依赖于 DOM 的初始化工作，比如获取元素的尺寸或者是与第三方的 DOM 有关的库进行交互等。

下面是一个简单的 Vue 3 组件示例，展示了如何使用 mounted 钩子：

import { ref, onMounted } from 'vue'export default {setup() {const count = ref(0)// 在组件挂载完成后执行onMounted(() => {console.log('Component is now mounted and ready')// 这里可以执行任何需要在挂载完成后做的事情// 比如访问真实的 DOM 元素const el = document.querySelector('#my-element')console.log(el)// 或者启动一个轮询定时器const interval = setInterval(() => {count.value++}, 1000)// 清理函数，在组件卸载前清除定时器return () => {clearInterval(interval)}})return { count }}
}

在这个例子中，onMounted 接受一个函数作为参数，该函数会在组件挂载到 DOM 后立即执行。

这里也展示了如何在 onMounted 回调中返回一个清理函数，它会在组件卸载时被调用，这对于清除副作用（如定时器）非常有用。

注意，Vue 3 使用了 Composition API，因此传统的选项式写法中的生命周期钩子（如 mounted）已经被 setup() 函数中的 onMounted() 函数所替代。

如果你是从 Vue 2 升级到 Vue 3，这可能是需要注意的一个变化。

vue3 mounted 的触发时机

在 Vue 3 中，mounted 生命周期钩子的触发时机是在组件实例被挂载到 DOM 后。

具体来说，这意味着以下几点：

实例创建完成：Vue 实例已经完成了数据观测（data observer）、属性和方法的运算，以及指令配置。此时，数据模型已经可以正常工作，但尚未开始第一次 DOM 渲染。
DOM 挂载完成：Vue 实例已经完成了模板编译和渲染，并且组件已经被插入到父容器节点中，DOM 已经被更新以反映组件的初始状态。
$el 属性可用：组件的 $e l 属性已经被创建并且可以访问，这意味着你可以在这个阶段通过 t hi s .$ el 访问到挂载后的 DOM 节点。
ref 属性可用：所有注册过的 ref 属性都已经解析，并且可以通过 this.$refs 访问到它们引用的 DOM 元素或子组件实例。

简而言之，mounted 钩子是当你需要在组件挂载后执行一些操作时使用的理想位置，比如：

操作 DOM：由于组件已经挂载到了 DOM 中，你现在可以安全地查询或操作 DOM。
初始化第三方插件：很多第三方插件或库需要一个已经存在的 DOM 节点来初始化，mounted 是一个合适的时间点。
发送网络请求：如果需要在组件加载时获取数据，可以在 mounted 钩子中发起网络请求。
设置定时器：如果需要在组件挂载后定期执行某些操作，可以在 mounted 钩子中设置定时器。

import { ref, onMounted } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');onMounted(() => {console.log('Component has been mounted!');// 在这里可以安全地操作 DOMconst element = document.getElementById('app');console.log(element); // 输出挂载后的 DOM 节点// 发送网络请求fetch('https://api.example.com/data').then(response => response.json()).then(data => {console.log('Fetched data:', data);message.value = data.message; // 更新组件的状态}).catch(error => {console.error('Error fetching data:', error);});});return { message };}
};