生命周期：其实就是一个组件从创建到销毁的这个过程叫做生命周期（钩子函数）
其实从官网的生命周期的图例就可以看出来，生命周期分八个阶段
分别为：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestory，destroyed
接下来，我们就一个阶段一个阶段的尝试，实验并且理解。
在开始之前，我们需要先搭建一个实例的模板出来：
<body>
<div id="app">
<h3 id="h3">{{msg}}</h3>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"aaa"
},
methods:{
show(){
console.log("bbb")
}
}
})
</script>
</body>
这时候页面上显示的是：
1、创建前（beforeCreate）
这是我们遇到的第一个生命周期函数，它表示的是在实例创建出来之前，会执行它，此时，还没有data和methods属性
var vm=new Vue({
el:"#app",
data:{
msg:"aaa"
},
methods:{
show(){
console.log("bbb")
}
},
//这是我们遇到的第一个生命周期函数
//表示实例在创建出来之前，会执行它，此时，还没有data和methods属性
beforeCreate(){
//在beforeCreate生命周期函数执行的时候，data和methods都没被初始化
//当我们在页面上想拿到自己定义的msg的时候，这时候页面现实的是undefind
console.log(this.msg)
}
})
页面上显示：
2、 创建后(created)
这是我们遇到的第二个生命周期函数，在created里，此时data和methods都被创建好了，但仍然不能获取Dom元素
//这是我们遇到的第二个生命周期函数
created(){
//在created里，此时data和methods都被创建好了，但仍然不能获取Dom元素
console.log(this.msg) //aaa
this.show() //bbb
},
此时，我们看一下我们页面上显示的内容吧
此时，数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。
3、载入前（beforeMount）
表示模板已经在内存中编译完成了，但是还没把模板渲染到页面中去，在执行beforeMount的时候，页面中的元素还没有真正被替换过来，只是之前写的一些模板字符串
//这是我们遇到的第三个生命周期函数（载入前）
//表示模板已经在内存中编译完成了，但是还没把模板渲染到页面中去
beforeMount(){
//在执行beforeMount的时候，页面中的元素还没有真正被替换过来，只是之前写的一些模板字符串
//让我们来获取一下当前页面上的元素吧
console.log(document.getElementById("h3").innerText)
},
此时，页面上显示着
并没有替换到我们的要显示的aaa
4、载入后(mounted)
这是我们遇到的第四个生命周期函数，这时候拿到的就是页面中的最新的数据，注意：mounted是实例创建期间的最后一个生命周期函数
mounted(){
//此时我们再来获取一下页面上的元素吧
console.log(document.getElementById("h3").innerText)
},
此时页面上打印出来的是：
注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
接下来，就是运行中的两个事件，这时候表示我们的界面还没有被更新，但是数据肯定被更新了
5、更新前（beforeUpdate）
当执行beforeUpdate的时候，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
//接下来是运行中的两个事件
//这时候表示我们的界面还没有被更新
//【数据被更新了吗？】数据肯定被更新了
beforeUpdate(){
//获取下当前页面上显示的是
console.log("当前显示的是"+document.getElementById("h3").innerText)
//当前的数据是：
console.log("当前数据是："+this.msg)
},
当执行这个的时候，我们需要更改页面上的数据，当你触发几次他就会执行几次，最少0次（数据从没被改变），最多无数次。
此时打印出来的是，此时，我们给那个按钮绑定了一个点击事件，只要一点击那个按钮，页面上的数据就会更改一下，原来是aaa，现在改为了bbb，但是打印出来的可不是这样的
6、更新后（updated）
此时，页面和data数据都保持同步了，都是最新的。
updated(){
//获取下当前页面上显示的是
console.log("当前显示的是："+document.getElementById("h3").innerText)
//当前的数据是：
console.log("当前数据是："+this.msg)
},
此时，当我们点击按钮时，页面上打印的是
//当前页面上的数据是bbb，msg数据也是bbb
7、销毁前（beforeDestroy）
当执行beforeDestory钩子函数的时候，vue实例，就已经从运行阶段进入到销毁阶段，实例身上的所有的data和所有的methods以及过滤器，都处于可用的状态，但此时，还没有真正执行到销毁的过程。
8、销毁后（destroyed）
当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，还有过滤器，所有的东西都已经不可以用了~
下面是我自己在官网图上总结下来的：
