Vue生命周期

转载：https://juejin.im/post/6893884574854545422

作为vue的核心之一，生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期，生命周期的内容，如何利用生命周期出发，做一些探究

生命周期的理解

官方：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期
通俗的说：当加载一个页面的时候，会创建一个vue实例来展示这个页面，

第一阶段

最先开始的 是创建，也就是 「beforeCreate」 ，这个阶段，实例初步被创建，还没有初始化，就是一个具备基本模板，没有任何数据和事件的光杆司令，
然后进入到「created」阶段，这时候实例创建完成，并且立刻调用这个钩子里的函数，这时候数据观测 (data observer)，watch/event 事件回调 的属性和方法配置完成，页面元素还没初始化，
接下来准备开始挂载dom节点，以供操作，在挂载之前 「beforeMount」 阶段，这时候相关的render函数首次被调用，并且完成页面元素和数据的初始化，
然后「mounted」阶段，这时候属性有了，方法有了，页面元素有了，数据也有了，所以这个阶段会对DOM节点进行操作，进行挂载完毕，并且挂载完毕后调用钩子里的函数，所以大多数的函数放在这里面，因为这里了开始可以对dom进行操作

第二阶段

第一阶段数据渲染完毕，页面展现完毕，这时候想要进行数据交互，这时的第一阶段是 「beforeUpdate」 ，它发生在数据更新的调用时候，DOM还没有重新渲染之前，这时候可以进一步更改状态，而且不会触发重新渲染的过程「updated」 阶段，这个阶段DOM以及重新渲染，可以行使操作新dom的的行为，但是应该避免出现这种行为，很可能会导致更新无线循环「beforeDestroy」 阶段，上一阶段的行为最好放在这里使用这是实例销毁之前的最后完整保留「destroyed this.$destroy()」 ，这个阶段实例被销毁，实例相关的一切消失，

小结： 生命周期钩子的一些使用方法：

「beforecreate」 : 可以在这加个*「loading」*事件，在加载实例时触发
「created」 : **「初始化」*完成时的事件写在这里，如在这「结束loading」*事件，异步请求也适宜在这里调用
「mounted」 : 挂载元素，获取到「DOM」节点
「updated」 : 如果对「数据统一处理」，在这里写上相应函数 「
beforeDestroy」 : 可以做一个「确认停止事件的确认框」

经典生命周期图

在这里插入图片描述

作者：coolFish
链接：https://juejin.im/post/6893884574854545422
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者：coolFish
链接：https://juejin.im/post/6893884574854545422
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者：coolFish
链接：https://juejin.im/post/6893884574854545422
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。