天津学网站建设/宁德市房价

前端inn

公众号ID：前端inn

关注

作者：阿良

编辑：煜喵喵不爱喝酒

我们在开发页面的时候，经常有一种需求，就是页面加载完毕后，就要完成ajax请求，得到后端的数据，并渲染在页面上。就前面所讲的两篇基础的vue文章来看，我们并不能做到这一点。今天我们就来讲解，vue的生命周期，让我们逐步用vue去完成我们开发中的需求。

首先来看一张大家都眼熟的图

这张图大家可能都眼熟，但是对一些萌新来说并不太友好，今天就来说说这张图是什么意思。

1.new vue() 是new了一个实例对象，这个时候，会开始创建这个vue组件

2. init Events Lifecycle  开始初始化组件，包括事件和生命周期。这一步执行完后，就可以调用组建的生命周期钩子函数了。

3. beforeCreate 这个阶段，顾名思义，是数据和事件配置之前调用。此时，无法使用vue的data和menthods和dom结构

4.Init injections reactivity ：这时开始初始化data和methods中的数据以及方法。

5.created 这个时候，data和methods已经配置完毕，但是dom结果依然未加载完成。在这个生命周期中，常用来发送ajax请求

6开始解析Vue模板的结构，把data里的数据拿到，并且解析你所输入的指令。当解析完所有的指令，那么模板页面就被渲染到内存中了。当模板编译完成，我们的模板页面，还没有挂载到页面上，只是存在于内存中，用户看不到页面。

7.beforemounted 在渲染到页面之前，发生的事件。此时模板结构在内存中的，还不在页面上，用户看不到页面

8.把内存中渲染好的模板渲染在页面上

9.mounted 页面已经渲染完毕，用户可以看到真正的页面数据。这个时候，组件就离开了创建节阶段，而是到了运行阶段。

10.组件内的data发生改变，会进行选择性触发

11.beforeupdate 数据更新调用前发生，此时页面数据仍为旧数据，但数data中的数据已经发生了改变

12.重新渲染内存中的模板结构，并替换在页面上

13.updated  当页面更新完成后，触发此事件。

14.beforeDestroy 此vue实例销毁前触发此事件，在这一步，实例还能正常使用

15.销毁过程

16.destoryed vue实例被销毁，解绑所有东西，data和menthods失效

相信大家看完刚才的讲解，对上面这张图有了更深刻的认识和理解。

我们常在created中去发生ajax请求，此时vue的data和menthods已经可以使用，作为一个工程化的项目，我们通常要对请求的函数进行封装。

具体如何封装，我们后期再谈。

在以上讲解中，我将钩子函数和一些生命周期中发生的过程混合在了一起，大家不要混淆，钩子函数是我们对此过程的一个应用。

生命周期这一块，在开发中很常用，希望大家可以认真学习理解！！！

若您对前端开发有兴趣请关注前端inn

遇到问题，请联系我们  QQ群：1141255876

求分享

求点赞

求在看