VUE-基础八-生命周期
Vue3.0生命周期
图片示例
按顺序依次是:
组件创建调用
- beforeCreate 实例创建时调用
- created 实例创建完成调用
- beforeMount 模板编译之前自动调用
- mounted 模板编译完成调用
组件更新调用:
- beforeUpdate 模板更新之前调用
- updated 模板更新完成调用
组件销毁调用
- beforeUnmount 实例销毁之前调用
- unmounted 实例销毁完成调用
组件缓存调用
只有用keep-alive包裹的组件，才会触发下面的生命周期
- activated
- deactivated
代码示例
- 首先创建个子组件
<template>
<div style="background-color: aliceblue">
<h1> this is ChildrenComp2 </h1>
<p>{{ num }}</p>
<button @click="num++">num ++ </button>
</div>
</template>
<script>
export default {
name: "ChildrenComp2",
data(){
return {
num:0
};
},
beforeCreate() {
console.log('一、创建实例之前自动调用 beforeCreate');
},
created() {
console.log('二、实例之创建完成自动调用 created');
},
beforeMount() {
console.log('三、模板编译之前自动调用 beforeMount');
},
mounted() {
console.log('四、模板编译完成自动调用 mounted');
},
beforeUpdate() {
console.log('五、模板更新之前自动调用 beforeUpdate');
},
updated() {
console.log('六、模板内容更新完成自动调用 updated');
},
// 缓存
activated() {
console.log('activated');
},
deactivated() {
console.log('deactivated');
},
// 销毁
beforeUnmount() {
console.log('七、实例在销毁之前调用 beforeUnmount');
},
unmounted() {
console.log('八、实例销毁完成调用 unmounted');
}
}
</script>
<style scoped>
</style>
- 然后引入到根组件并添加v-if标签
<template>
<button @click="isShow=!isShow">显示/隐藏</button>
<ChildrenComp2 v-if="isShow">
</ChildrenComp2>
</template>
<script>
import ChildrenComp2 from "./components/ChildrenComp2";
export default {
name: 'App',
components:{
ChildrenComp2
},
data(){
return {
isShow:false
}
},
}
</script>
<!--scoped 限制局部样式-->
<style lang="scss">
</style>
生命周期方法
- 项目启动后可以看到控制台打印信息
没有信息打印，然后点击显示隐藏按钮，让子组件进行展示。
打印了四步，组件创建调用的四步。然后点击子组件的num++按钮进行数据变化。
所以数据更新会触发beforeUpdate和updated - 然后点击显示隐藏按钮，把组件销毁了。v-if是销毁组件。
缓存标签与生命周期
使用
上面演示当改变num之后，然后销毁组件，再显示的时候，组件会被重新创建，num也会被重新初始化。所以num=0了。
而当在根组件上使用keep-alive标签后，
- 点击显示打印如下
多了一个activated 的打印
点击隐藏也不会销毁了，而是触发deactivated方法
组件不会销毁也不会重新初始化，所以num改变也不会被重置。
this.$nextTick(()
this.$nextTick(()=>{
// this.$refs.username.focus();
})
暂时不是很明白，待补充
完整代码
app.vue
<template>
<button @click="isShow=!isShow">显示/隐藏button>
<keep-alive>
<ChildrenComp2 v-if="isShow">
ChildrenComp2>
keep-alive>
template>
<script>
import ChildrenComp2 from "./components/ChildrenComp2";
export default {
name: 'App',
components:{
ChildrenComp2
},
data(){
return {
isShow:false
}
},
}
script>
<style lang="scss">
style>
ChildrenComp2.vue
<template>
<div style="background-color: aliceblue">
<h1> this is ChildrenComp2 h1>
<p>{{ num }}p>
<button @click="num++">num ++ button>
div>
template>
<script>
export default {
name: "ChildrenComp2",
data(){
return {
num:0
};
},
beforeCreate() {
console.log('一、创建实例之前自动调用 beforeCreate');
},
created() {
console.log('二、实例之创建完成自动调用 created');
},
beforeMount() {
console.log('三、模板编译之前自动调用 beforeMount');
},
mounted() {
console.log('四、模板编译完成自动调用 mounted');
},
beforeUpdate() {
console.log('五、模板更新之前自动调用 beforeUpdate');
},
updated() {
console.log('六、模板内容更新完成自动调用 updated');
},
// 缓存
activated() {
console.log('activated');
},
deactivated() {
console.log('deactivated');
},
// 销毁
beforeUnmount() {
console.log('七、实例在销毁之前调用 beforeUnmount');
},
unmounted() {
console.log('八、实例销毁完成调用 unmounted');
}
}
script>
<style scoped>
style>