生命周期函数

一、什么是生命周期函数？

vue运行过程中，当某一条件成立时系统会去调用vue中的函数，这些函数称为生命周期函数。

二、常见的生命周期函数有哪些？

组件的有8个(创建前后,挂载前后,更新前后,销毁前后)
自定义指令也有5个
动态组件有2个 

路由(组件有3个,全局有2个,独享有1个) 

在这里我只介绍一下组件的8个。

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

1.beforeCreate和created

beforeCreate（创建前）:

• 能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的。
• this设置不了，因为这是创建之前的。
• 它可以用作预加载。(图片、工具的预加载)

 created（创建后）:

• 能做网络请求。同上。
• this可以设置，因为这时vm对象(即this)已经创建出来了。但无法操作dom。
• 它可以请求首屏数据。

2.beforeMount和mounted 

beforeMount（挂载前）:

• 渲染前的操作。
• vm对象已经创建完毕了,在挂载之前触发。
• 它可以操作this，但无法操作dom。

mounted（挂载后）: 

• vm已经挂载到页面了。
• 请求首屏数据，请求时页面已经出来了。

3.beforeUpdate和updated 

beforeUpdate（更新前）:

• 不能网络请求新数据，去更新数据源，会导致死循环。
• 数据源已经更新了，页面重新渲染前触发。

updated（更新后）:

•  不能网络请求新数据，去更新数据源，会导致死循环。
• 页面已经重新渲染。

4.beforeDestroy和destroyed

beforeDestroy（销毁前）:

• vm对象销毁之前触发的钩子,this还在  可以做最后的操作。
• 可以用作保存用户的行为配置文件:播放器的进度，等等。

destroyed （销毁后）:

• 后面在webpack环境下操作，故无法操作this。

 三、为什么要设计生命周期函数？

为了更好的设计程序,让代码更有逻辑 和 可维护性

四、页面首次加载过程中,会依次触发哪些钩子(生命周期函数)？ 

• beforeCreate
• created
• beforeMount
• mounted