生命周期函数

生命周期函数，也叫钩子函数、生命函数。

定义：在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数。

什么叫钩子？

c语言中有一类系统回调的函数然后执行业务 叫做钩子

为什么要用生命周期函数?

1.把整个运行期间的业务区分的很明显；

2.能够更好的帮助我们把产品的业务逻辑实现了；

3.更有利于我们维护产品 和 修改需求；

4.能够让我们写出更高质量的产品的代码.

今天我们学习当前vm实例在创建到销毁的过程中，会去调用的8个生命周期函数。

依次讲解：

1、beforeCreate(){}

根据函数名的英语我们可以理解成创建完成前

这个函数是干什么的？

主要用于预加载网络资源，并不进行页面渲染，将资源缓存到本地，当页面渲染需要请求该资源时直接在本地获取。

这个函数调用时能否网络请求?

能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的。

能否网络请求数据 然后设置到数据源中?

不能设置到数据源中,因为这个钩子中 this还在创建，this对象中还不能访问到数据。

2、created(){}

理解为创建完成

这个函数在项目中干什么?

请求首屏数据。

能否网络请求?

能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的。

能否网络请求数据 然后设置到数据源中?

可以设置到数据源中,因为这个钩子中 this已经创建完毕了，vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中，这个函数可以操作this对象了  但是无法操作DOM。

3、beforeMount(){}

理解为挂载完成之前

这个函数在项目中干什么?

用于渲染前的操作

能否网络请求?

能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的。

能否网络请求数据 然后设置到数据源中?

能设置到数据源中，运行这个函数时，vm对象已经创建完毕了,在挂载之前触发的钩子。这个函数可以操作this对象了 但是无法操作DOM。

4、mounted(){}

理解为挂载完成

这个函数在项目中干什么?

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

能否网络请求?

能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的。

能否网络请求数据 然后设置到数据源中?

能设置到数据源中，运行这个函数时，vm已经挂载到页面了。

5、beforeUpdate(){}

理解为页面重新渲染之前

这个函数在项目中干什么?

用于重新渲染之前的操作。

能否网络请求?

不能网络请求新数据 去更新数据源，会导致死循环。

运行这个函数时，数据源已经更新了,这个函数是页面重新渲染前(并不是数据更新前) 触发的钩子。

6、updated(){}

理解为页面重新渲染完成

这个函数在项目中干什么?

用于重新渲染完成时的操作

能否网络请求?

不能网络请求新数据 去更新数据源，也会导致死循环。

7、beforeDestroy(){}

理解为销毁完成之前

这个函数在项目中干什么?

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

也能做网络请求

8、destroyed(){}

理解为vm对象已经销毁

这个函数在项目中干什么?

vm对象销毁之前触发的钩子，this已经不存在，无法操作this。往往把当前组件中计时器清除了  可以把body的滚动条滚到顶部。

也能做网络请求

总结一下

beforeCreate created beforeMount mounted beforeDestroy destoryed这些钩子都只执行一次;

beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用;

beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例。

只有beforeUpdate updated运行时不能做网络请求；

我们一般把网络请求放在created或者mounted中，具体的根具业务需求来；

放在created:因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势 放在mounted:因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI