转 vue的钩子函数-生命周期

vue的钩子函数-生命周期

播报文章

所为生命周期顾名思义即是一个物质从诞生至消逝的一个过程，那么原理进行解答分析。在javascript这个脚本语言中的一个框架vue里的生命周期的含义会是怎么的一个过程呢？

生命周期函数共有: beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeDestroy() destroyed()

分别代表: 创建时创建完毕时挂在前挂载结束更新前更新完成销毁前销毁结束。

那我们就来讲解一下它的运行原理。

1

首先在data()return{}里定义一个基本的数据,用来调用钩子函数，之后在标签中渲染一下。
2

我们用第一个生命周期函数: beforeCreate()

这个时候组件实例刚被创建，像data里的都是未定义形式，我们可以看控制台打印的全部都是未定义状态。
3

第二个生命周期函数: created()

这是个比较重要的钩子函数，其在实际应用中使用较多，组件实例创建完成，属性已绑定但是DOM并未完成所以我们看执行结果, $el(DOM)还阶于未定义中。
4

第三个生命周期函数: beforeMount()

从这里开始属于模板挂载编辑之前，我们可以看到再次执行this.$el时就将整个模板打印了出来里面还为{{ message }}。
5

第四个生命周期函数: mounted()

此函数为挂载结束时的状态，我们看控制台里的打印结果与beforeMount()函数不同的在于已将模板中的{{ message }} 打印为了 this . $http axios的字符串，这样就是挂载结束时了。
6

剩下四个为:生命周期函数分别为：beforeUpdate() updated() beforeDestroy() destroyed() 它们分别代表，更新前更新完成销毁前销毁完成四个阶段。

这四个通常用不到，做演示需要自己去进行尝试使更为清晰，

总结: 以一下图片很清晰就说明了整个钩子函数-生命周期。

END