关于vue生命周期的一些思考
"再见少年拉满弓，不惧风雨不惧风"
上一篇文章我们简单的介绍了一下vue的生命周期，还有vue父子间组件生命周期的执行顺序
难么这一篇文章让我们从一个面试题开始，我们面试的时候经常会被问到：讲一vue的生命周期，这是我们如果只是简单的讲一讲上一篇文章中的一些知识，难免显得有些匮乏
ps：那么我们应该从什么角度切入，使问题更加深入一些呢？
首先我们可以讲一下，进入组件时生命周期的调用顺序，第一次进入组件的时候会调用 beforecreate 、created 、 beforemount 、mounted 这几个生命周期，当然如果我们使用keep-alive来对组件进行缓存的话，还会额外调用actived组件
那么讲到这面试官可能会问，如果再次进入keep-alive缓存的页面，以及离开组件的话会调用哪些生命周期函数呢？
首先keep-alive缓存页面之后，再次进入keep-alive的页面只会调用actived这个生命周期函数，离开组件的话如果页面没有被keep-alive缓存，那么会调用destoryed这个回调函数，如果被keep-alive缓存的话呢，离开页面会调用deactived这个生命周期函数，大家一定要记牢
兄弟组件之间的生命周期执行顺序
那么兄弟组件之间生命周期的调用顺序又是什么样的呢？ 假设我们有两个子组件，如下： 父组件：
<template>
<div>
<photo></photo>
<ttext></ttext>
验证加入keep-alive后的执行顺序
<!-- <keep-alive>
<photo></photo>
</keep-alive>
<keep-alive>
<ttext></ttext>
</keep-alive> -->
<!-- <keep-alive>
<photo></photo>
</keep-alive>
<ttext></ttext> -->
</div>
</template>
<script>
import photo from './zizujian/photo.vue'
import ttext from './zizujian/text.vue'
export default {
data() {
return {
flag: 'a',
}
},
components: {
photo,
ttext
},
beforeCreate() {
console.log('父组件beforecreate');
},
created() {
console.log('父组件created');
},
beforeMount() {
console.log('父组件beforeMount');
},
mounted() {
console.log('父组件mounted')
},
activated() {
console.log('父组件activated')
},
deactivated() {
console.log('父组件deactivated');
},
beforeDestroy() {
console.log('父组件beforeDestroy');
},
destroyed() {
console.log('父组件destroyed');
}
}
</script>
<style>
</style>
A：图片
<template>
<div>
图片
</div>
</template>
<script>
export default {
beforeCreate() {
console.log('图片beforecreate');
},
created() {
console.log('图片created');
},
beforeMount() {
console.log('图片beforeMount');
},
mounted() {
console.log('图片mounted')
},
activated() {
console.log('图片activated')
},
deactivated() {
console.log('图片deactivated');
},
beforeDestroy() {
console.log('图片beforeDestroy');
},
destroyed() {
console.log('图片destroyed');
}
}
</script>
<style>
</style>
B：文字
<template>
<div>
文字
</div>
</template>
<script>
export default {
beforeCreate() {
console.log('文字beforecreate');
},
created() {
console.log('文字created');
},
beforeMount() {
console.log('文字beforeMount');
},
mounted() {
console.log('文字mounted')
},
activated() {
console.log('文字activated')
},
deactivated() {
console.log('文字deactivated');
},
beforeDestroy() {
console.log('文字beforeDestroy');
},
destroyed() {
console.log('文字destroyed');
}
}
</script>
<style>
</style>
执行的顺序如下：
这就是子组件不在keep-alive缓存的执行顺序
在keep-alive缓存后的执行顺序
得到的结果是这样的
兄弟组件的actived执行在兄弟的mounted回调函数之前
这就是兄弟组件之间的回调函数顺序，如果有不对的地方，希望大家批评指正
