vue中created和mounted区别

发布时间 2023-09-23 15:33:00作者: 阿飞藏泪

在 Vue.js 中,created 和 mounted 都是生命周期钩子函数,用于在组件不同的生命周期阶段执行代码。它们的主要区别如下:

1.created 钩子函数:


2.created 在组件实例被创建后立即调用。此时组件的实例已经被创建,并且组件的数据观测(data observation)和事件机制已经初始化完成。
3.created 钩子函数常用于执行一些初始化逻辑,例如获取数据、订阅事件、进行初始的数据处理等。


4.mounted 钩子函数:


5.mounted 在组件被挂载到 DOM 后调用。此时,组件的模板已经编译完成,并且组件实例被挂载到了真实的 DOM 元素上。
6.mounted 钩子函数常用于进行DOM操作、依赖第三方库的初始化或访问外部API等操作,因为在该阶段组件已经被完全渲染到页面中。

简而言之:

7.created 钩子函数适用于在组件创建时执行的逻辑,通常涉及组件自身的初始化,但此时尚未访问到 DOM 元素。
8.mounted 钩子函数适用于在组件挂载到 DOM 后执行的逻辑,此时可以操作 DOM 元素、访问外部API、初始化插件等。

需要注意的是,如果组件在切换路由时被销毁再重新创建,mounted 钩子函数会再次触发,而 created 钩子函数只会在组件实例创建时触发一次。这是因为 created 是在组件实例创建时调用的,而 mounted 是在组件被挂载后调用的。
在选择使用 created 或 mounted 钩子函数时,需要根据具体的需求和操作时机来决定哪个更适合。