vue3生命周期钩子函数

小刘先生很努力

已于 2022-06-15 17:01:36 修改

阅读量8.9k

点赞数 2

文章标签： javascript 前端 vue.js vue3生命周期钩子函数

于 2022-06-14 11:38:48 首次发布

本文链接：https://blog.csdn.net/lzfengquan/article/details/125274039

版权

本文详细介绍了Vue2和Vue3中生命周期钩子函数的变化，包括beforeCreate、created、beforeMount等，并提供了相应的代码示例。在Vue3中，部分钩子函数被重命名为onBeforeMount等。通过对比，读者可以更好地理解和适配Vue3的新特性。

摘要由CSDN通过智能技术生成

vue2生命周期钩子函数视图
 vue3生命周期钩子函数视图
在这里插入图片描述

代码 // 通过配置项

beforeCreate () {
console.log(‘beforeCreate’);
},
created () {
console.log(‘created’);
},
beforeMount () {
console.log(‘beforeMount’);
},
mounted () {
console.log(‘mounted’);
},
beforeUpdate () {
console.log(‘beforeUpdate’);
},
updated () {
console.log(‘updated’);
},
beforeUnMount(){
console.log(‘beforeUnMount’);
},
unmounted(){
console.log(‘unmounted’);
}

初始化
在这里插入图片描述
加1执行过程

显示隐藏过程

你就用配置项写吧，下边看看就行

注意下，vue3 中的生命周期钩子函数可以用vue2的，但是有两个更名了
在这里插入图片描述
// 通过组合式API
onBeforeMount(()=>{
console.log(‘onBeforeMount’);
})
onMounted(()=>{
console.log(‘onMounted’);
})
onBeforeUpdate(()=>{
console.log(‘onBeforeUpdate’);
})
onUpdated(()=>{
console.log(‘onUpdated’);
})
onBeforeUnmount(()=>{
console.log(‘onBeforeUnmount’);
})
onUnmounted(()=>{
console.log(‘onUnmounted’);
})