原理概述 Vue 3的生命周期(Lifecycle)指的是组件从创建到销毁经历的一系列事件,在这些事件中可以执行一些操作,例如初始化数据、渲染视图、加载异步数据等。在Vue 3中,通
Vue 3的生命周期(Lifecycle)指的是组件从创建到销毁经历的一系列事件,在这些事件中可以执行一些操作,例如初始化数据、渲染视图、加载异步数据等。在Vue 3中,通过setup()函数来定义组件的生命周期。
Vue 3的生命周期包含了以下几个阶段:
在实例创建之前,即在初始化之前被调用。此时,尚未初始化组件实例,无法访问data、methods和computed等属性,在组件状态初始化之前执行一些操作。
export default {
beforeCreate() {
console.log('beforeCreate');
}
}
在实例创建之后,即在初始化之后被调用。此时,已经完成了数据观测等配置,但尚未挂载DOM,并且可以访问data、methods和computed等属性。可以使用created钩子函数进行数据初始化和事件的监听等操作。
import { onMounted, onUnmounted } from 'vue';
export default {
data() {
return {
count: 0
};
},
created() {
console.log('created');
},
mounted() {
onMounted(() => {
console.log('component mounted');
});
},
unmounted() {
onUnmounted(() => {
console.log('component unmounted');
});
}
}
在挂载开始之前被调用。在此阶段中,尚未渲染真实的DOM节点。可以使用beforeMount钩子函数,在组件挂载之前进行一些异步操作,例如加载动画等。
export default {
beforeMount() {
console.log('beforeMount');
}
}
在挂载结束后被调用。此时,组件已经渲染出真实的DOM。mounted钩子函数往往用于初始化DOM操作以及与服务器交互后填充组件的数据,例如通过ref获取DOM节点和注册事件监听器等。
export default {
mounted() {
console.log('mounted');
const button = this.$refs.myButton;
button.addEventListener('click', () => {
this.count++;
});
}
}
在数据更新之前被调用。此时,可以在更新之前访问旧的数据状态。可以使用beforeUpdate钩子函数,在组件数据更新之前执行一些操作,例如动态绑定class和style等。
export default {
beforeUpdate() {
console.log('beforeUpdate');
}
}
在数据更新之后被调用。此时,组件已经更新DOM,可以通过访问最新的数据状态来完成DOM的操作。可以使用updated钩子函数,在组件数据更新之后执行一些操作,例如触发动画效果等。
export default {
updated() {
console.log('updated');
}
}
在组件卸载之前被调用。此时,组件实例仍然完全可用,但是它的视图已经被销毁并且不再更新。可以使用beforeUnmount钩子函数,在组件卸载之前执行一些清理操作,例如取消事件监听器、定时器和异步请求等。
export default {
beforeUnmount() {
console.log('beforeUnmount');
}
}
在组件卸载之后被调用。此时,组件实例以及其所有相关联的DOM元素均已销毁,无法再访问组件内部数据和方法。可以使用unmounted钩子函数,在组件卸载之后执行一些最终清理操作。
export default {
unmounted() {
console.log('unmounted');
}
}
需要注意的是,Vue 3中去掉了一些生命周期函数,例如activated、deactivated和errorCaptured等,这些可以通过新的Composition api来实现。
总之,在Vue 3的开发中,生命周期一直是非常重要的概念之一,需要将钩子函数应用到合适的场景中,以充分利用Vue 3提供的生命周期机制来优化组件的性能和行为。合理地利用生命周期可以提高组件的代码质量和运行效率。
--结束END--
本文标题: vue3生命周期原理与生命周期函数简单应用实例分析 原创
本文链接: https://www.lsjlt.com/news/210657.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0