Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] 组件进来请求接口时你是放在哪个生命周期?为什么? #315

Open
haizhilin2013 opened this issue Jun 20, 2019 · 4 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 组件进来请求接口时你是放在哪个生命周期?为什么?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@Myh-cs
Copy link

Myh-cs commented Jul 9, 2019

一般在created 因为在这个生命周期我们常用到的都已经初始化好了
如果涉及dom 那就mounted

@DanielLeefu
Copy link

created => 因为在这个生命周期我们常用到的都已经初始化好了
涉及到需要页面加载完成之后的话就用 mounted,可以操作 dom

@AILOVEU
Copy link

AILOVEU commented 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
Copy link

通常情况下,组件在Vue的mounted生命周期钩子函数中进行接口请求是比较常见的做法。

mounted生命周期钩子函数是在组件被挂载到DOM后调用的阶段,此时组件的模板已经被编译为最终的DOM结构,并成功地插入到页面中。在mounted钩子函数中,可以执行与DOM相关的操作,比如获取DOM元素、添加事件监听器等。同时,也可以进行异步操作,如发送接口请求。

以下是将接口请求放在mounted生命周期钩子函数中的原因:

组件已经挂载: 在mounted阶段,组件已经完成DOM的渲染和挂载,此时可以确保可以正常访问到DOM元素和组件的实例。
异步请求合适: 接口请求通常是异步的操作,而mounted钩子函数是异步操作的理想场景,可以在该阶段发起异步请求并处理返回的数据。
避免重复请求: 将接口请求放在mounted中可以避免重复请求,因为mounted只会在组件初次渲染时调用一次,不会重复触发。
需要注意的是,对于一些需要在组件每次激活时都发起接口请求的场景,可以考虑在activated生命周期钩子函数中进行请求,而不是mounted。activated钩子函数在组件被激活时调用,可以用于处理组件的每次显示或路由切换时需要重新请求的数据。

总结起来,将接口请求放在Vue组件的mounted生命周期钩子函数中是一种常见的做法,因为在此阶段可以确保组件已经成功挂载,可以进行与DOM相关的操作,并且适合处理异步请求。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

5 participants