mounted
2024年03月13日
一、认识
mounted
在组件被挂载之后调用。组件在以下情况下被视为已挂载:
-
所有同步子组件都已经被挂载。(不包含异步组件或
<Suspense>
树内的组件) -
其自身的
DOM
树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件DOM
树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM
树相关的副作用,或是在服务端渲染应用中用于确保 DOM
相关代码仅在客户端被调用。
这个钩子在服务端渲染时不会被调用。
二、语法
三、对比
3.1 created VS mounted
created
是在组件实例一旦创建完成后立即调用, 此时已经处理完所有与状态相关的选项, 比如 响应式数据、计算属性、方法和侦听器, 此时没有发生挂载操作, $el
不可以使用。mounted
是在组件被挂载之后调用。 触发时机上, created
比 mounted
要早, 两者都可以拿到实例对象的属性和方法。但是由于在 mounted
阶段 DOM
已经挂载, 在这个阶段数据请求可能会导致页面闪动。在 created
中发送请求则不会。