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] vue在created和mounted这两个生命周期中请求数据有什么区别呢? #348

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

Comments

@haizhilin2013
Copy link
Collaborator

[vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@duxuyong
Copy link

  1. created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态

@xindiyang
Copy link

看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)。

@sky124380729
Copy link

  1. created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态

请求是异步的,怎么会影响页面的渲染呢

@sl1673495
Copy link

  1. created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态

这是还没搞清楚同步和异步吧

@Jason-HuangTai
Copy link

  1. created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态

请求是异步的,怎么会影响页面的渲染呢

请问要是请求存在很大的数据量,比如响应10几秒这种应该在哪里请求呢?

@divasatanica
Copy link

  1. created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态

请求是异步的,怎么会影响页面的渲染呢

请问要是请求存在很大的数据量,比如响应10几秒这种应该在哪里请求呢?

created 里面请求即可,请求响应时间长,应该由你的业务代码去处理这种异常,Vue 的框架层面不知道你的异步请求究竟什么时候结束,不可能等待你的请求回来再继续渲染。
还有一点就是,如果在 mounted 中做一些同步的数据操作,因为此时 DOM 已经挂载完毕,更改数据会让会导致组件重复渲染一次,可以提前到 created 去做。

@ilss
Copy link

ilss commented Mar 8, 2022

$data $el

@AAA611
Copy link

AAA611 commented Aug 30, 2022

1

created 比mounted 提前,请求提前发个人认为要好一些,mounted 也可以,不过可能会出现页面渲染出来了但数据还没回来的情况,这个时候数据回来的时候会闪一下(当然如果接口慢的话 created 里面也有可能出现这个情况,但created请求的早所以比mounted还是要快一些)

2

SSR 没有 mounted

@Cai-zhiji
Copy link

created生命周期适合在组件创建阶段就进行数据的请求和初始化,但需要注意在模板中使用这些数据时可能会有一定的延迟。而mounted生命周期则适合进行DOM操作和将数据绑定到模板上,因为此时组件的模板和DOM已经准备就绪。

如果需要确保在数据获取完成后再进行某些操作,可以在created或mounted生命周期中使用异步请求或Promise,以便在数据请求完成后执行相应的逻辑。另外,也可以使用Vue提供的watch属性或计算属性来监视数据的变化,以便在数据更新后执行相应的操作。

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

10 participants