1、父组件
<template>
<h2>App</h2>
<button @click="isShow=!isShow">切换</button>
<hr>
<Child v-if="isShow"/>
</template>
import Child from './Child.vue';
export default {
data () {
return {
isShow: true
}
},
components: {
Child
}
};
2、子组件
<template>
<div class="about">
<h2>msg: {
{msg}}</h2>
<hr>
<button @click="update">更新</button>
</div>
</template>
import {
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的生命周期执行。