一.什么是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(“子组件报错”)
},