Vue onBeforeMount()、onMounted() 、onBeforeUnmount()、onUnmounted() 组件挂载、卸载生命周期钩子

onBeforeMount()、onMounted() 、onBeforeUnmount()、onUnmounted() 

这四个生命周期分别应在组件的挂载、卸载时触发。执行顺序依次：

onBeforeMount()  ===》  onMounted() ===》  onBeforeUnmount() ===》  onUnmounted() 

使用前需要被引入：

import {
    onBeforeMount,
    onMounted,
    onBeforeUnmount,
    onUnmounted
} from 'vue'

 

 

onBeforeMount()

@说明：组件被挂载之前被调用。它在组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点之前触发。

 

onMounted()

@说明：组件挂载完成后执行。此时DOM节点已创建完成。通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码。

 

onBeforeUnmount()

@说明：组件被卸载之前被调用。

 

onUnmounted()

@说明：组件卸载之后调用。通常用于做一下清理工作。