Vue的生命周期

一、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，

这给了用户在不同阶段添加自己的代码的机会我们在写组件的时候会遇到一些问题，比如我们想让页面加载好了之后开启一个定时器，比如我们想页面初始化的时候就能请求一些后端数据渲染到页面中，

我们之前学习的方法都需要有触发才能执行vue的实例从开始到结束有着不同的生命阶段，组成了vue的生命周期。

 

1.1  beforeCreate页面初始化之前

 

官方介绍：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

 

这个阶段指的是数据初始化前调用，访问不到data或者methods方法等等.

 

1.2 created页面初始化

 

官方解释：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用

 

 

 

created指的是页面初始化完成，当生命周期完成的时候会遍历data中所有的属性，给每个属性添加对应的getter和setter方法，将data中的属性变成可响应式

 

1.3  beforeMount页面挂载之前

 

官方解释：在挂载开始之前被调用：相关的 render 函数首次被调用

 

这个阶段是模板与数据进行结合，但是还没有挂载到页面上，因此我们可以在当前的生命周期中进行最后的数据修改

 

在这个阶段我们还是不能获取到$el

1.4 mounted页面挂载后

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

在这个生命周期中，将数据和模板结合万之后挂载到DOM中，因此我们能够在当前的生命周期中获取真实的DOM元素

 

1.5  beforeUpdate页面更新前

 

官方解释：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

 

在这个生命周期中数据已经完成了更新，相应的dom也完成数据的更新，但是没有页面虚拟DOM没有完成打补丁操作，

在这个生命周期中，我们可以使用对更新前的数据进行最后一步的操作，在这个生命周期中对数据的更新不会再次触发视图的渲染，获取进行手动移除事件监听

 

在这个生命周期中是可以完成对数据的更新的，不会死循环。

1.6  updated页面更新后

官方解释：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，

你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

在这个生命周期中是千万不能进行对页面数据的更新，否则会引起死循环

1.7  beforeDestroy

官方解释：实例销毁之前调用。在这一步，实例仍然完全可用

使用场景，当我们页面中有定时器等等，此时我们可以通过beforeDestroy进行移除

1.8  destroyed

官方解释：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁

使用场景，当页面销毁后我们可以进行页面路由的跳转，也可以拦截之前没有移除的定时器任务等等