前端设计

vue中created和mounted的区别

2024-01-19

Vue中的 created 和 mounted 两个生命周期钩子函数的执行时机有所不同:


created 钩子函数是在组件实例被创建后立即调用的。在这个阶段,虽然组件的DOM节点还没有生成,但是数据观测(data observation)和事件机制已经初始化完成。因此,created 钩子函数适合用于执行一些初始化逻辑,例如获取数据、订阅事件、进行初始的数据处理等。这些操作可以在组件创建时就进行,而不依赖于DOM节点的存在。

mounted 钩子函数则是在组件被挂载到DOM后调用的。这意味着此时组件的模板已经编译完成,并且组件实例被挂载到了真实的DOM元素上。因此, mounted 钩子函数常用于进行DOM操作、依赖第三方库的初始化或访问外部API等操作,因为此时组件已经被完全渲染到页面中。此外,如果在组件切换路由时被销毁再重新创建, mounted 钩子函数也会再次触发。

总结来说, created 钩子函数适用于在组件创建时执行的逻辑,而 mounted 钩子函数适用于在组件挂载到DOM后执行的逻辑。根据具体的需求和操作时机来选择使用这两个钩子函数是很重要的。