08.vue生命周期-lifecircle

一.什么是vue生命周期

生命周期是指一个组件从创建=>运行=>销毁的整个过程

注意事项:

beforeCreate 在它之前刚初始化了一个空的vue实例对象，在这个阶段，实例对象身上只有默认的一些生命周期函数和默认的事件，其他的东西都未创建，在这个生命周期函数执行的 时候，data和methods中的数据都还没有初始化 ；
created:此生命周期中数据已经初始化,可以通过this访问到data,method中的数据和方法；
beforeMount 接着下来，vue开始编辑模板，执行vue的代码，最终会在内存中生成一个编译好的最终模板字符串，紧接着渲染为内存中的DOM，也就是说，此函数在执行的时候，只是在内存中渲染好了模板，而没有把模板挂载到真正的页面中去，这个阶段，页面还是旧的；
mounted:此生命周期中dom渲染完成,可以第一次操作dom；
beforeupdate:此生命周期中数据是最新的,但是html结构不是最新的；
updated:当数据变化时,为了得到最新的dom结构,需要把代码写道updated生命周期函数中；
beforeDestroy 当执行beforeDestroy的时候，vue实例就已经从运行阶段，进入到了销毁阶段。这个时候实例身上的data和methods以及component等等都处于可用状态，还没有真正执行销毁的过程；
destroyed 当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中的data,methods等等都已经不可用了；

其他三个钩子函数

activated deactivated errorCaptured

<keep-alive>
keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，也不需要再创建
<component v-bind:is=“one”> //如果是动态属性，那么会去data中取值
</keep-alive>
三个钩子函数详解
当keep-alive 缓存组件才会有的生命周期的钩子函数
activated deactivated
errorCaptured 当子孙组件出错时，会调用这个钩子函数
// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
// 生命周期的钩子函数
activated() {
// 当缓存组件有被显示出来时，会触发这个钩子函数
console.log(100);
},
deactivated() {
// 当缓存的组件隐藏时，会触发这个钩子函数；
console.log(200);
},
// 当子孙组件出错时，会调用这个钩子函数
errorCaptured(a, b, c) {
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log(a);
console.log(b);
console.log©;
console.log(“子组件报错”)
},