浅谈Vue的生命周期（一）

浅谈Vue的生命周期（一）

在谈vue的生命周期之前，你能正视以下几个问题吗？

1. vue3来了，vue2会被淘汰吗？
2. vue3的生命周期和vue2有那些不一样呢？

我们先来看看vue2和vue3生命周期的对比图

上面的图片很形象的阐述了 Vue 的基本生命周期了。
如果上述的图片不够清晰，请小伙伴们异步到这里查看vue2和vue3基本生命周期对比图

关于vue2的生命周期的解答

这一部分我也是从官网总结的一部分，大家也可以去官网查看更加详细的解答
vue生命周期
vue-router 组件内的守卫

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

created：在实例已经创建完成之后被调用。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，event事件回调。挂载阶段尚未开始，$el 属性不可见。

beforeMount：在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted：在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中，此时一般可以做一些Ajax操作。注意mounted只会执行一次。

beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

activated：被 keep-alive 缓存的组件激活时调用。

deactivated：被 keep-alive 缓存的组件停用时调用。

beforeDestroy：在实例销毁之前调用。实例仍然完全可用。

destroyed：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用。不能获取组件实例 this，因为当守卫执行前，组件实例还没被创建

beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 this

beforeRouteLeave：导航离开该组件的对应路由时调用。可以访问组件实例 this

如果对上面的Vue生命周期了解的小伙伴，此时此刻，有几个问题，你看看是否能回答出来？

面试问题（待完善）

假设现在我们有A、B两个页面，均无缓存的、配置路由的情况下

初始进入A页面：beforeRouteEnter->beforeCreate->created->beforeMount->mounted
A->B：A[beforeRouteLeave]->B[beforeRouteEnter]->B[beforeCreate]->B[created]->B[beforeMount]->A[beforeDestroy]->A[destroyed]->B[mounted]
B->A：B[beforeRouteLeave]->A[beforeRouteEnter]->A[beforeCreate]->A[created]->A[beforeMount]->B[beforeDestroy]->B[destroyed]->A[mounted]

假设现在我们有A、B两个页面，均缓存的、配置路由的情况下

初始进入A页面：beforeRouteEnter->beforeCreate->created->beforeMount->mounted->activated
A->B：A[beforeRouteLeave]->B[beforeRouteEnter]->B[beforeCreate]->B[created]->B[beforeMount]->A[deactivated]->B[mounted]->B[activated]
B->A：B[beforeRouteLeave]->A[beforeRouteEnter]->B[deactivated]-A[activated]

原创不易，转载请标名出处