今天给大家上演几场好看的戏，看看他们之间会发生什么有趣的事情呢？
下面介绍一下今天的两位主角
- Vue2生命周期
- Vue3生命周期
一般这两个主角是不会同台的，今天我故意把他俩放到一起看一下他们的执行顺序究竟是谁先谁后，谁是最终的胜利者。
废话少说，上代码！
开场戏：Vue3生命周期上台
主要代码
setup(){
console.log('Vue3生命周期：setup');
// 渲染
onBeforeMount(()=>{
console.log('Vue3生命周期：onBeforeMount');
})
onMounted(() => {
console.log('Vue3生命周期：onMounted');
})
// 更新
onBeforeUpdate(()=>{
console.log('Vue3生命周期：onBeforeUpdate');
})
onUpdated(()=>{
console.log('Vue3生命周期：onUpdated');
})
// 卸载
onBeforeUnmount(() => {
console.log('Vue3生命周期：onBeforeUnmount');
})
onUnmounted(() => {
console.log('Vue3生命周期：onUnmounted');
})
},
执行顺序
Vue3生命周期：setup
Vue3生命周期：onBeforeMount
Vue3生命周期：onMounted
总结
创建实例阶段
- setup：创建实例前执行 （没有this）
渲染阶段
-
onBeforeMount：渲染组件DOM之前
-
onMounted：渲染组件DOM之后
更新阶段
-
onBeforeUpdate：组件更新前
-
onUpdated：组件更新后
销毁阶段
-
onBeforeUnmount：组件销毁前
-
onUnmounted：组件销毁后
重头戏：Vue2生命周期和Vue3生命周期同台飙戏
vue2生命周期和vue3生命周期一起使用的时候执行顺序是什么样的呢？
主要代码
const app = Vue.createApp({
beforeCreate(){
console.log('Vue2生命周期：beforeCreate');
},
created(){
console.log('Vue2生命周期：created');
},
beforeMount(){
console.log('Vue2生命周期：beForeMount');
},
mounted(){
console.log('Vue2生命周期：mounted');
},
beforeUpdate(){
console.log('Vue2生命周期：beforeUpdate');
},
updated(){
console.log('Vue2生命周期：updated');
},
beforeDestory(){
console.log('Vue2生命周期：beforeDeftory');
},
destoryed(){
onsole.log('Vue2生命周期：destoryed');
},
setup(){
console.log('Vue3生命周期：setup');
// 渲染
onBeforeMount(()=>{
console.log('Vue3生命周期：onBeforeMount');
})
onMounted(() => {
console.log('Vue3生命周期：onMounted');
})
// 更新
onBeforeUpdate(()=>{
console.log('Vue3生命周期：onBeforeUpdate');
})
onUpdated(()=>{
console.log('Vue3生命周期：onUpdated');
})
// 卸载
onBeforeUnmount(() => {
console.log('Vue3生命周期：onBeforeUnmount');
})
onUnmounted(() => {
console.log('Vue3生命周期：onUnmounted');
})
},
data(){
return {
'myName': 'yq'
}
},
template: `111
`
})
执行顺序
Vue3生命周期：setup
Vue2生命周期：beforeCreate
Vue2生命周期：created
Vue3生命周期：onBeforeMount
Vue2生命周期：beForeMount
Vue3生命周期：onMounted
Vue2生命周期：mounted
总结
创建实例阶段
-
Vue3生命周期：setup
-
Vue2生命周期：beforeCreate
-
Vue2生命周期：created
渲染阶段
-
Vue3生命周期：onBeforeMount
-
Vue2生命周期：beForeMount
-
Vue3生命周期：onMounted
-
Vue2生命周期：mounted
更新阶段
-
Vue3生命周期：onBeforeUpdate
-
Vue2生命周期：beforeUpdate
-
Vue3生命周期：onUpdated
-
Vue2生命周期：updated
销毁阶段
-
Vue3生命周期：onBeforeUnmount
-
Vue2生命周期：beforeUnmount
-
Vue3生命周期：onUnmounted
-
Vue2生命周期：unmounted
宫斗戏：Vue2和Vue3父子组件生命周期执行顺序
主要代码
父组件
// 父组件
const app = Vue.createApp({
beforeCreate(){
console.log('Vue2生命周期：beforeCreate');
},
created(){
console.log('Vue2生命周期：created');
},
beforeMount(){
console.log('Vue2生命周期：beForeMount');
},
mounted(){
console.log('Vue2生命周期：mounted');
},
beforeUpdate(){
console.log('Vue2生命周期：beforeUpdate');
},
updated(){
console.log('Vue2生命周期：updated');
},
beforeDestory(){
console.log('Vue2生命周期：beforeDeftory');
},
destoryed(){
onsole.log('Vue2生命周期：destoryed');
},
setup(){
console.log('Vue3生命周期：setup');
// 渲染
onBeforeMount(()=>{
console.log('Vue3生命周期：onBeforeMount');
})
onMounted(() => {
console.log('Vue3生命周期：onMounted');
})
// 更新
onBeforeUpdate(()=>{
console.log('Vue3生命周期：onBeforeUpdate');
})
onUpdated(()=>{
console.log('Vue3生命周期：onUpdated');
})
// 卸载
onBeforeUnmount(() => {
console.log('Vue3生命周期：onBeforeUnmount');
})
onUnmounted(() => {
console.log('Vue3生命周期：onUnmounted');
})
return {
}
},
template: `<child /> `
})
child子组件
app.component('child', {
template: `<div>child</div>`,
beforeUnmount(){
console.log('Vue2生命周期：beforeUnmount');
},
unmounted(){
console.log('Vue2生命周期：unmounted');
},
setup(){
console.log('Vue3生命周期：子组件setup');
onBeforeMount(() => {
console.log('Vue3生命周期：子组件onBeforeMount');
})
onMounted(() => {
console.log('Vue3生命周期：子组件onMounted');
})
onBeforeUnmount(()=>{
console.log('Vue3生命周期：onBeforeUnmount');
})
onUnmounted(() => {
console.log('Vue3生命周期：onUnmounted');
})
}
})
执行顺序
Vue3生命周期：setup
Vue2生命周期：beforeCreate
Vue2生命周期：created
Vue3生命周期：onBeforeMount
Vue2生命周期：beForeMount
Vue3生命周期：子组件setup
Vue3生命周期：子组件onBeforeMount
Vue3生命周期：子组件onMounted
Vue3生命周期：onMounted
Vue2生命周期：mounted
总结
同一个阶段的生命周期Vue3先执行，后执行vue2生命周期，然后再执行下一个阶段的生命周期。
恭喜Vue3生命周期获得今天的擂主
