生命周期的定义
生命周期：就是一个组件从实例化创建并添加到DOM开始，一直到组件被销毁的整个过程。
生命周期函数（钩子函数）：就是在Vue生命周期的整个过程的不同阶段被调用的函数。
生命周期图示
首先来看一下官网对于Vue生命周期的图解，官网上目前有8个生命周期函数，还有两个后期再看。
注意事项：
1、Vue的生命周期中的beforeCreate、created、beforeMount、mounted只会执行一次。
2、而Vue中的beforeUpdate、updated的生命周期只要数据发生了改变便会触发。
beforeCreate：创建DOM元素前，此时打印this，data没有数据。（一般这一步不会做任何事情）
beforeCreate() {
//大部分这一步不会做任何事情
console.log('初始化数据之前');
console.log('this',this)
}
created：DOM元素创建渲染完成，包括数据在内的所有vue内部初始化完毕，此时打印this，data中已经有数据了（一般在这个阶段中发送ajax请求）
created() {
//数据初始化完毕
//一般用于掉用ajax去请求后台数据接口
console.log('数据初始化完毕');
console.log('this',this)
}
会先判断创建的Vue实例对象中是否有el去挂载DOM元素，如果有的话，往下执行，如果没有，那么会执行vm.$mount('#app')的方式去挂载DOM元素，如果vm.$mount都没挂载DOM元素节点，那么数据便不会被渲染到视图中去。
注意点：如果没有template模板的话，那么会将挂载元素的#app作为模板去进行编译。（即 <div id="app"></div>）
beforeMount：页面初次渲染之前执行
mounted：页面初次渲染完毕，我们经常会在这个钩子函数中处理跟页面有关，（ 如获取DOM，或者一些希望在页面渲染完毕后做一些事情 ）
beforeUpdate：当页面在mounted阶段渲染完毕后，如果Vue中发生了数据的变化，那么会进入beforeUpdate阶段，在这个阶段，数据会更新，但是值得注意的是，并不会在页面上展示更新后的内容！
updated：数据更新完毕，并且页面重新渲染完成。（会再一次的触发mouted周期）
beforeDestroy：是指的组件在销毁之前会触发。（一般用于解除绑定，销毁子组件及事件监听器）针对于特定的定时器以及自定义事件，需要手动的去清除，否则会一直占用内存在运行着（如清除方法：clearInterval(timer) ）。
destroyed：指的组件在销毁结束后触发。（没有很大的实际用途）
