Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

duxuyong

duxuyong commented on Jul 15, 2019

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

xindiyang commented on Jul 23, 2019

@xindiyang

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

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

sky124380729

sky124380729 commented on Oct 21, 2019

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

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

sl1673495

sl1673495 commented on Nov 25, 2019

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

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

Jason-HuangTai

Jason-HuangTai commented on Dec 23, 2019

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

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

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

divasatanica

divasatanica commented on Feb 26, 2020

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

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

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

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

ilss

ilss commented on Mar 8, 2022

@ilss

$data $el

AAA611

AAA611 commented on Aug 30, 2022

@AAA611

1

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

2

SSR 没有 mounted

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@ilss@divasatanica@sky124380729@sl1673495

        Issue actions

          [vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢? · Issue #348 · haizlin/fe-interview