Skip to content

[vue] DOM渲染在哪个周期中就已经完成了? #312

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] DOM渲染在哪个周期中就已经完成了?

Activity

getanimation

getanimation commented on Jul 15, 2019

@getanimation

mounted生命周期

ciaozz

ciaozz commented on Apr 25, 2021

@ciaozz

beforeMount吧,渲染完成但尚未挂载到页面中

MoMeak9

MoMeak9 commented on Oct 20, 2021

@MoMeak9

DOM 渲染在 mounted 中就已经完成了

hyj443

hyj443 commented on Oct 21, 2021

@hyj443

mounted真的完成了DOM渲染吗?

文档的原话:

实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick:

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

在Vue中,DOM渲染是在mounted生命周期钩子函数中完成的。
mounted生命周期钩子函数是在组件实例被挂载到DOM上后调用的,这意味着此时组件的模板已经被编译为最终的DOM结构,并成功地插入到页面中。在mounted钩子函数中,可以执行与DOM相关的操作,如获取DOM元素、添加事件监听器、使用第三方库等。

需要注意的是,在mounted之前的生命周期钩子函数,如beforeMount和created,虽然也可以访问到组件的数据和方法,但此时DOM尚未渲染完成,因此无法保证访问或操作具体的DOM元素。

总结起来,Vue的mounted生命周期钩子函数是在DOM渲染完成后被调用的阶段,可以用于执行与DOM相关的操作。

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@ciaozz@getanimation@hyj443@MoMeak9

        Issue actions

          [vue] DOM渲染在哪个周期中就已经完成了? · Issue #312 · haizlin/fe-interview