通过上一章的学习，我们已经初步的了解了vue到底是什么东西，可以干什么，而这一篇博客主要介绍vue的生命周期和它常用的钩子函数，如果有学过java的园友可能有接触到在学习servlet的时候学过servlet的生命周期servlet 加载--->实例化--->服务--->销毁,对于vue的而言他也有自己的生命周期，那么一起来看看吧！
本章目标学会并了解vue的生命周期和钩子函数
vue的生命周期和钩子函数其实在提到vue的生命周期和钩子函数的时候，有的人认为常用的钩子函数有10个，也有的人认为是8个，无论是10个还是8个对于我而言都是一样的，我们主要讲解8个vue的钩子函数。首先来一波官网的对于vue生命周期的图解
这一张图对于vue的生命周期已经讲解的特别详细了，但是光靠这一张图还不足于了解它的生命周期，我们需要实践一下，有句古话说的好，实践是检验道理的唯一标准，介绍一下vue的钩子函数。
实例组件刚开始创建，元素dom和数据都还没有初始化
应用场景：可以在这加个loading事件
created(实例创建后)数据data已经初始化完成，方法也已经可以调用，但是dom为渲染，在这个周期里面如果进行请求是可以改变数据并渲染，由于dom未挂载，请求过多或者占用时间过长会导致页面线上空白
应用场景：在这结束loading，还做一些初始化，实现函数自执行
dom未完成挂载，数据初始化完成，但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术
mouted(元素挂载后)数据和dom都完成挂载，在上一个周期占位的数据把值渲染进去，一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染
beforeUpdate(实例更新前)只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候就会执行这个周期，如果没有数据改变不执行
updated(实例更新后)只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的，beforeUpdated和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和死循环
beforeDestory(实例销毁前)实例销毁之前调用，在这一步，实例仍然完全可用
destory(实例销毁后)Vue实例销毁后调用，调用后，Vue实例指示的所有内容都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁
实例一<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue的生命周期实例一</title> </head> <body> <div id="app"> <input type="text" v-model="msg" /> {{msg}} </div> <button onclick="destory()">销毁</button> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ el:'#app', data:{ msg:'vue' }, beforeCreate(){ console.log('vue实例创建前:'+this.msg+','+this.$el); // 数据data和dom都还没有初始化 }, created(){ console.log('vue实例创建后:'+this.msg+','+this.$el); //数据dom初始化完成，dom还没有初始化完成 }, beforeMount(){ console.log('元素挂载前:'); console.log(this.$el); }, mounted(){ console.log('元素挂载后:'); console.log(this.$el); }, beforeUpdate(){ console.log('实例更新前'); console.log(this.msg); console.log(this.$el); }, updated(){ console.log('实例更新后'); console.log(this.msg); console.log(this.$el); }, beforeDestroy(){ console.log('实例销毁前'); console.log(this.msg); }, destroyed(){ console.log('实例销毁后'); console.log(this.msg); } }); function destory(){ vm.$destroy(); } </script> </body> </html>