created 和 mounted 有什么区别?
在Vue中,created
和mounted
是两个常用的生命周期钩子函数,它们在组件的生命周期中扮演着不同的角色:
created:
created
是组件生命周期中的一个钩子函数,在Vue实例被创建后立即调用。
- 在
created
钩子函数中,Vue实例已经完成了数据观测(data observation),但尚未渲染真实DOM。这意味着你可以访问实例中的数据、方法、计算属性等,但不能保证实例已经被插入到DOM中。
created
常用于一些初始化操作,例如数据请求、事件监听或其他非DOM相关的任务。因为此时,组件的模板还未被编译成真实DOM。
mounted:
mounted
是组件生命周期中的一个钩子函数,在Vue实例挂载到DOM后调用。
- 在
mounted
钩子函数中,Vue实例已经完成了模板编译,并且已经将生成的虚拟DOM渲染到真实DOM中。
mounted
常用于需要对DOM进行操作的任务,例如初始化第三方库、绑定事件监听器、执行动画等。因为此时,组件已经被插入到DOM中,可以安全地访问和操作DOM元素。
区别总结:
created
在实例创建后被调用,适合处理数据初始化和非DOM相关的任务。
mounted
在实例挂载到DOM后被调用,适合进行DOM操作、初始化第三方库和绑定事件监听。