vue3的生命周期

1、父组件

<template> <h2>App data () { return { isShow: true } }, components: { Child } }; 

2、子组件

<template> <div class="about"> <h2>msg: {{msg}} ref, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from "vue"; export default { beforeCreate () { console.log('2.xbeforeCreate()') }, created () { console.log('2.xcreated') }, beforeMount () { console.log('2.xbeforeMount') }, mounted () { console.log('2.xmounted') }, beforeUpdate () { console.log('2.xbeforeUpdate') }, updated () { console.log('2.xupdated') }, beforeUnmount () { console.log('2.xbeforeUnmount') }, unmounted () { console.log('2.xunmounted') }, setup() { const msg = ref('abc'); const update = () => { msg.value += '--'; }; onBeforeMount(() => { console.log('3.0--onBeforeMount') }); onMounted(() => { console.log('3.0--onMounted') }); onBeforeUpdate(() => { console.log('3.0--onBeforeUpdate') }); onUpdated(() => { console.log('3.0--onUpdated') }); onBeforeUnmount(() => { console.log('3.0--onBeforeUnmount') }); onUnmounted(() => { console.log('3.0--onUnmounted') }); return { msg, update }; } }; 

3、2.x与3.x生命周期执行顺序

3.x中生命周期执行顺序比2.x快，也就是先于2.x的生命周期执行。