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] DOM渲染在哪个周期中就已经完成了? #312

Open
haizhilin2013 opened this issue Jun 20, 2019 · 5 comments
Open

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

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

Comments

@haizhilin2013
Copy link
Collaborator

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

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

mounted生命周期

@ciaozz
Copy link

ciaozz commented Apr 25, 2021

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

@MoMeak9
Copy link

MoMeak9 commented Oct 20, 2021

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

@hyj443
Copy link

hyj443 commented Oct 21, 2021

mounted真的完成了DOM渲染吗?

文档的原话:

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

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

@Cai-zhiji
Copy link

在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
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

6 participants