介绍
vue3和vue2的生命周期改动不大,下面以图来展现两个版本的周期钩子
使用示例
配置项写法
vue3可以使用vue2版本的周期配置
准备一个HelloWord组件
使用App组件嵌套HelloWorld组件,并进行v-if判断是否卸载该组件,以此查看vue3的卸载钩子
测试:
可以看到当页面刷新后执行了4个周期函数
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')
},
这是vue3使用vue2版本的周期函数配置,在vue3中其实是建议在setup中进行组合式api的周期函数的配置的
组合式api写法
代码示例
测试:
还有一个有趣的现象,就是如果书写了配置项的周期函数,又书写了组合式api的钩子,这时的组合式api的钩子函数执行的优先级要高一点下面来进行示例:
查看测试:
可以看到每次都是setup中的函数执行的顺序都要比配置项的要先一步,但是在实际开发中基本不会有这样的写法,这个只是当做测试使用
