Vue3中页面挂载就执行的函数
时间: 2024-10-12 18:14:32 浏览: 20
vue页面离开后执行函数的实例
在Vue3中,当组件实例被创建并添加到DOM上时,会触发生命周期钩子`beforeMount`和`mounted`。这两个阶段都是页面挂载过程中发生的:
1. `beforeMount()`:这个钩子在渲染开始之前调用,通常在这个阶段可以进行一些异步数据获取或者设置初始状态,因为DOM还没有插入到文档中。
2. `mounted()`:这是组件真正挂载到DOM之上的时刻。在这里,你可以操作DOM元素,执行初次的数据绑定、事件监听等操作。由于这时组件已经存在于浏览器环境中,所以这个函数是最适合执行初始化完成后的页面操作的。
如果你有一个需要在页面挂载完成后立即执行的函数,你可以把它放在`mounted()`生命周期钩子里。例如:
```javascript
export default {
setup() {
// 初始化数据或其他配置
const initFunction = () => {
// 执行你需要的操作
};
return { initFunction };
},
mounted() {
this.initFunction(); // 页面已挂载,现在可以调用这个函数
}
};
```
阅读全文