Vue实例的生命周期函数

概念： 从Vue实例创建，运行，销毁期间，总是会伴随各种各样的事件 生命周期钩子=生命周期函数=生命周期事件
使用：

var vm=new Vue({
beforeCreate(){
}
})

1.创建期间的生命周期函数

1. beforeCreate(){}
   作用：在Vue实例在未完全创建之前会执行
   将new Vue()对象中的data和methods等注入到Vue实例中
   时机：Vue实例默认的初始化完成
   注意：无法访问data和methods中是数据和函数

2. created(){}
   作用：在Vue实例完全创建后执行
   生成编译好的html模板（旧）
   时机：Vue实例完整创建完成
   注意：此时可以访问data和methods中的数据和函数
   若要执行自定义的页面数据初始化方法可以加到这里

3. beforeMount(){}
   作用：在html模板创建完成后执行
   对创建好的html模板进行渲染
   时机：html模板（旧）在内存中创建完成，数据还没开始渲染

4. mounted(){}
   作用：在html模板渲染完成后执行
   将html模板（新）挂载到浏览器中
   时机：内存中html模板（新）的数据已经渲染完成，但还没挂载到浏览器中
   当mounted()执行完后，整个Vue实例和html模板创建过程结束

2.运行期间的生命周期函数

这两个生命周期函数只有当页面中的数据改变时才会执行

1. beforeUpdate(){}
   作用：在data中的数据更新后执行
   对内存中的html模板（旧）进行渲染
   时机：在data中的数据更新时，html模板（旧）中的数据还未更新
   注意：在页面上无法看出效果，只能在控制台输出才能看出区别，updated函数会执行。

2. updated(){}
   作用：html模板中的数据更新后执行
   将内存中的html模板（新）挂载到浏览器中
   时机：在内存中html模板（新）重新渲染后，但还未挂载到浏览器中

3.销毁期间的生命周期函数

1. beforeDestroy(){}
   作用：在Vue实例解绑数据和方法等前执行
   对Vue实例的数据和方法等进行解绑
   时机：Vue实例中的数据和方法还未被解绑，此时，Vue实例中的数据和方法还可用

2. destroyed(){}
   作用：在组件被完全销毁后执行
   时机：在组件已经被完全销毁了，此时，Vue实例中的数据和方法都不可用

生命周期