Vue 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们最早可在mounted 中进行。

生命周期通俗一点的来讲就是一个事物从产生到消失的一整个时间周期过程,Vue的生命周期就是从创建到销毁的整个过程,该过程包括:开始创建、初始化数据、编译模板、挂载dom/渲染、渲染更新、销毁/卸载等过程。具体的钩子函数如下所示:

Vue 生命周期

1、beforeCreate() 在组件实例初始化之后、创建之前被调用。

2、created() 在组件实例创建完成之后被调用。

3、beforeMount() 在组件实例挂载开始之前被调用。

4、mounted() 在组件实例挂载完成之后被调用。

5、beforeUpdate() 在组件实例数据更新之前时被调用,发生在虚拟DOM重新渲染和打补丁之前。这不会触发附加的重渲染过程。

6、updated() 在组件实例数据更改导致的虚拟 DOM 重新渲染和打补丁之后被调用。该钩子函数在服务器端渲染期间不被调用。

7、beforeDestroy() 在组件实例销毁之前被调用。

8、destroyed() 在组件实例销毁后被调用。该钩子函数在服务器端渲染期间不被调用。