一,生命周期

初次加载:
1.setup 创建:组件创建前和创建后执行,包含了beforeCreatecreated
2.beforeMount 挂载前:组件挂载前执行
3.mounted 挂载后:组件挂载后执行

更新:
1.beforeUpdated 更新前执行
2.updated 更新完成后执行

卸载:
1.beforeUnmount 卸载前执行
2.unmounted 卸载后执行

(当直接单击浏览器页签关闭页面时,页面的beforeUnmountunmounted好像不执行,这时需要使用window.onunload事件来处理业务 以上为个人开发时发现,在网上没有找到资料支持

异常:
1.errorCaptured 异常捕捉

keepalive专属
1.actived 组件激活时执行,第一加载也会执行
2.deactived 组件失活时执行,组件卸载时也会执行

二,选项式api

1.在vue3中,所有生命周期都可以在setup中以组合式api引入,使用是在前面加一个on

2.引入的生命周期是一个函数,传入一个函数代表执行函数

import { onMounted } from 'vue';

onMounted(()=>{
	console.log('component mounted')
})

二,注意事项

1.vue的响应式思想是,只有应用到模板上的响应式数据(除了props)发生了修改,才会触发更新生命周期,对于没有应用到模板上的响应式数据,即使发生修改,也不会触发更新周期。

2.对于组件的props,要分两种情况讨论

(1)当是基础数据时,只要发生改变,不管是否应用到组件上,都会执行更新生命周期

(2)当是对象时,又可分为两种情况

①替换整个对象(引用地址发生改变),会执行更新生命周期,
②更新对象的某个属性时,当属性被应用到模板上,会执行更新生命周期,没有被引用到模板上,不会执行更新生命周期。

Logo

前往低代码交流专区

更多推荐