[vue] 组件进来请求接口时你是放在哪个生命周期?为什么?
Activity
Myh-cs commentedon Jul 9, 2019
一般在created 因为在这个生命周期我们常用到的都已经初始化好了
如果涉及dom 那就mounted
DanielLeefu commentedon Dec 25, 2019
created => 因为在这个生命周期我们常用到的都已经初始化好了
涉及到需要页面加载完成之后的话就用 mounted,可以操作 dom
AILOVEU commentedon Aug 19, 2021
这个因人而异因项目而异,我个人更喜欢放在mounted里面
created的时候已经可以请求接口了,data、methods等已经可以调用,但没有办法获取到el内容。
我实验了下,在created的时候使用await setTimeout,并不能阻止mounted生命周期的调用,我的理解是生命周期钩子只是vue在完成某一阶段后声明调用了这个方法,但不保证里面的方法执行完,这是异步的。
如果在mounted的时候想通过created获取的数据在去处理el,会出问题,因为可能数据还在请求中。
所以,请求最好统一放在created或mounted其中一个中,如果有el操作,那么最好都在mounted中。
created到mounted和,vdom更新了个节点消费的时间差不多,项目ok的话,放在mounted没有问题。
Cai-zhiji commentedon Jul 7, 2023
通常情况下,组件在Vue的mounted生命周期钩子函数中进行接口请求是比较常见的做法。
mounted生命周期钩子函数是在组件被挂载到DOM后调用的阶段,此时组件的模板已经被编译为最终的DOM结构,并成功地插入到页面中。在mounted钩子函数中,可以执行与DOM相关的操作,比如获取DOM元素、添加事件监听器等。同时,也可以进行异步操作,如发送接口请求。
以下是将接口请求放在mounted生命周期钩子函数中的原因:
组件已经挂载: 在mounted阶段,组件已经完成DOM的渲染和挂载,此时可以确保可以正常访问到DOM元素和组件的实例。
异步请求合适: 接口请求通常是异步的操作,而mounted钩子函数是异步操作的理想场景,可以在该阶段发起异步请求并处理返回的数据。
避免重复请求: 将接口请求放在mounted中可以避免重复请求,因为mounted只会在组件初次渲染时调用一次,不会重复触发。
需要注意的是,对于一些需要在组件每次激活时都发起接口请求的场景,可以考虑在activated生命周期钩子函数中进行请求,而不是mounted。activated钩子函数在组件被激活时调用,可以用于处理组件的每次显示或路由切换时需要重新请求的数据。
总结起来,将接口请求放在Vue组件的mounted生命周期钩子函数中是一种常见的做法,因为在此阶段可以确保组件已经成功挂载,可以进行与DOM相关的操作,并且适合处理异步请求。