总结：
生命周期的优点
生命周期让我们在控制整个vue时更容易形成更好的逻辑，
四个阶段，11个钩子函数，创建前后、挂载阶段、更新阶段、销毁阶段
分别有：
创建前：beforeCreate() data和methods不可使用
创建后：Created() 可以使用data和methods不能使用dom
挂载前：beforeMount() data,methods可以使用但是不能使用dom
挂载后：Mounted() dom渲染完毕可以使用dom
更新前：beforeUptate() 当data的数据导致dom发生改变会执行这个钩子，
更新后：Updated()
销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
销毁后：Destroyed() 已经销毁完毕
这两个生命周期是当使用keep-alive之后才会生效
activated() { }//组件激活时触发的生命周期
deactivated() { }//组件失活时触发的生命周期
errorCaptured:当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：
错误对象、发生错误的组件实例、包含错误来源信息的字符串。
此钩子可以返回 false 以阻止该错误继续向上传播。
Vue3.0中的生命周期做了一些改动：
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。
mounted -> onMounted 组件挂载完成后执行的函数
beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。
updated -> onUpdated 当data的数据导致dom发生改变会执行这个钩子。
beforeDestroy -> onBeforeUnmount销毁前
destroyed -> onUnmounted 组件卸载
errorCaptured -> onErrorCaptured 捕获错误
解释：
beforeCreate
vue组件实例对象已经创建完毕但是 data methods里面的内容还没有准备好 不可用
created
data methods 可以用, dom对象不可用
// data methods 数据可以用 dom对象元素不可用
//html
<div class="div">{{msg}}</div>
//js
created() {
let el = document.querySelector('.div')
console.log(el);//undefined
},
beforeMount
data methods 可以用, dom对象不可用
mounted() { },
这时候真实dom已经渲染完毕 可以获取dom对象
beforeUpdate
当数据更新导致的dom更新或者打补丁之前触发的生命周期
细节 重点 当数据更新不会触发beforeUpdate(){},
当数据更新导致的dom更新或者打补丁之前触发的生命周期才会触发 !!!
updated
当数据更新导致的dom更新或者打补丁之后触发的生命周期
keep-alive
这两个生命周期是当使用keep-alive之后才会生效
activated() { // 组件激活时触发的生命周期
},
deactivated() { // 组件失活时触发的生命周期
},
beforeDestroy
组件页面销毁前
destroyed
组件页面销毁
errorCaptured
当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：
错误对象、发生错误的组件实例、包含错误来源信息的字符串。
此钩子可以返回 false 以阻止该错误继续向上传播。
