vue.js|20211025_Vue生命周期和钩子函数 javascript|前端

VUE生命周期函数写作时间：2021年10月25日凌晨 1:05
作者：前端阿来
序言
这个点本来是该在梦乡里和心爱的女孩子约会的时间，我却打开电脑开始撸文章。因为因为实在实在睡不着，生命有限我又不敢浪费。
三大状态
在我理解Vue的生命周期中，总的可以分为三个状态创建中、活动中、销毁中，通过这三大状态和每个状态中的钩子函数构成了Vue的生命周期。
对了钩子函数你们知道的吧，钩子函数就相当于你在钓鱼，鱼儿咬钩了，然后就会进行一些的操作比如收线收杆，你会根据鱼儿的状态进行一系列的操作。Vue生命周期中定义了这些钩子函数，他们就会根据当前组件的状态去触发。
他们三种状态中的钩子函数如下所示：
创建中：创建中一共有四个钩子函数。

beforeCreate：创建之前触发，此时不能调用定义的data和function，因为数据和事件还没有被配置。
created：实例创建完成之后触发，此时data和function可以调用，但是因为还没有被挂载，因此$el不能使用。
beforeMount：实例挂载之前会触发，首次触发render函数。
mounted：此时实例已经挂载完成了，可以在这个钩子函数中调用请求数据的方法。
活动中：活动状态时有两个钩子函数，
beforeUpdate：当数据发生改变时，会触发这个事件，此时可以查看原来的数据。
updated：虚拟DOM已经渲染完成，会触发这个事件。
注销中：注销时也有两个人钩子函数。
beforeDestroy：注销之前会被调用，此时实例对象依旧时可用的。
destroyed：注销完成后调用，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

工作过程
在Vue的官网中给了这一张图，解释了Vue生命周期的工作过程和钩子函数的关系。初次之外，他还告诉你你暂时不用懂这些。。大家大可不必信他的鬼话，这个是基础啦，该懂还是要懂的，不然面试会很被动，学习工作中也会踩坑。

文章图片

写在最后
前几天面试被人家问Vue的生命周期，一时间竟然想不起来，只是含含糊糊的说了created、createdbefore、mounted。实在有愧于前端的各位前辈，因此，痛定思痛，下定决心，要把所有的生命周期搞明白。
刚好看了一遍API，今天晚上又毫无睡意，因此就有了这篇文章的诞生，目的是为我总结一份笔记，也算是加强理解和巩固知识。还有一个好处，我理解的不对的地方欢迎各位同学纠错，在此先行谢过。
现在是2：34啦，我也该和我心爱的女孩子相见啦。晚安。
【vue.js|20211025_Vue生命周期和钩子函数】另外另外如果你觉得还不错的话，不要吝啬你的赞