13.Vue3.x中组件的生命周期函数（lifecycle）、 this.$nextTick、动态组件 keep-alive、Vue实现Tab切换
一、Vue3.x中组件的生命周期函数
摘自官网的图
LifeCycle.vue组件
<template>
<h2>生命周期函数演示h2>
template>
<script>
export default {
name: "",
data() {
return {
}
},
methods: {
},
beforeCreate() {
console.log("实例刚刚被创建1")
},
created() {
console.log("实例已经创建完成2")
},
beforeMount() {
console.log("模板编译之前3")
},
mounted() {
// 请求数据，操作dom，放在这个里面 mounted
console.log("模板编译完成4")
},
beforeUpdate() {
console.log("数据更新之前")
},
updated() {
console.log("数据更新完毕")
},
activated() {
console.log("keep-alive缓存的组件激活时调用")
},
deactivated() {
console.log("keep-alive缓存的组件停用时调用")
},
beforeUnmount() {
// vue2.x中叫beforeDestroy
// 页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数
console.log("实例销毁之前")
},
unmounted() {
// vue2.x中叫destroyed
console.log("实例销毁完成")
}
}
script>
<style scoped>
style>
App.vue根组件中调用LifeCycle.vue组件
<template>
<v-lifecycle v-if="isShow">v-lifecycle>
<br>
<button @click="isShow=!isShow">挂载/卸载组件button>
template>
<script>
import LifeCycle from "@/components/LifeCycle";
export default {
name: "App",
data() {
return {
msg:"app根组件",
isShow:true,
}
},
components:{
// 注册挂载组件
"v-lifecycle":LifeCycle,
},
methods: {
}
}
script>
<style scoped>
h2{
text-align: center;
background: #000;
height: 44px;
line-height: 44px;
color: #fff;
}
style>
二、动态组件 keep-alive
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，比避免重复渲染导致的性能问题，这个时候就用用keep-alive
在不同路由切换的时候想保持组件的状态可用使用keep-alive
<keep-alive>
<v-lifecycle v-if="isShow">v-lifecycle>
keep-alive>
三、this.$nextTick的使用
Vue中可以把获取Dom节点的代码放在mounted里面，但是如果要在渲染完成数据后获取Dom节点就需要用到this.$nextTick
mounted() {
// 请求数据，操作dom，放在这个里面 mounted
this.$nextTick(function () {
// 仅在渲染整个视图之后运行的代码
});
}
四、Vue实现Tab切换
keep-alive结合Tab切换Demo：
<template>
<h2>生命周期函数演示h2>
{
{ msg }}
<br>
<button @click="changeMsg">改变msgbutton>
<br><br>
<div class="tab_info">
<ul class="tab_header">
<li v-for="(item,index) in posts"
:class="{
'active':currentTab==index}"
:key="index"
@click="currentTab=index">
{
{ item.title }}
li>
ul>
<div class="tab_content">
<span v-html="content">span>
div>
div>
template>
<script>
export default {
name: "",
data() {
return {
msg: "我是msg",
currentTab: 0,
posts: [{
id: 1,
title: "Nodejs教程",
content: "Nodejs系列教程有Nodejs基础、Nodejs Express、Nodejs Koa、Egg.js、Nest.js等
"
},
{
id: 2,
title: "Golang教程",
content: "教程包括：Golang零基础入门进阶进阶教程、Beego基础、Mysql入门实战、Gorm入门、Gorm实战、Gorm关联查询、Golang+Beego+Grom仿小米商城项目
"
},
{
id: 3,
title: "TypeScript教程",
content: "TypeScript基础语法............
"
}],
}
},
methods: {
changeMsg() {
this.msg = "改变后的msg"
}
},
computed: {
content() {
return this.posts[this.currentTab].content;
}
},
beforeCreate() {
console.log("实例刚刚被创建1")
},
created() {
console.log("实例已经创建完成2")
},
beforeMount() {
console.log("模板编译之前3")
},
mounted() {
// 请求数据，操作dom，放在这个里面 mounted
console.log("模板编译完成4")
},
beforeUpdate() {
console.log("数据更新之前")
},
updated() {
console.log("数据更新完毕")
},
activated() {
console.log("keep-alive缓存的组件激活时调用")
},
deactivated() {
console.log("keep-alive缓存的组件停用时调用")
},
beforeUnmount() {
// vue2.x中叫beforeDestroy
// 页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数
console.log("实例销毁之前")
},
unmounted() {
// vue2.x中叫destroyed
console.log("实例销毁完成")
}
}
script>
<style lang="scss" scoped>
ul {
list-style-type: none;
padding-inline-start: 0px;
}
.tab_info {
width: 600px;
margin: 0 auto;
border: 1px solid #eee;
.tab_header {
height: 40px;
line-height: 40px;
li {
display: inline-block;
margin: 0px 5px;
background: #eee;
text-align: center;
padding: 0px 10px;
cursor: pointer;
&.active {
background: red;
color:#fff
}
}
}
.tab_content {
padding: 0px 5px;
}
}
style>
App.vue调用组件
<template>
<keep-alive>
<v-lifecycle v-if="isShow">v-lifecycle>
keep-alive>
<br>
<button @click="isShow=!isShow">挂载/卸载组件button>
template>
<script>
import LifeCycle from "@/components/LifeCycle";
export default {
name: "App",
data() {
return {
msg:"app根组件",
isShow:true,
}
},
components:{
// 注册挂载组件
"v-lifecycle":LifeCycle,
},
methods: {
}
}
script>
<style scoped>
h2{
text-align: center;
background: #000;
height: 44px;
line-height: 44px;
color: #fff;
}
style>
当使用了keep-alive元素后，实例销毁之前(beforeUnmount)与销毁完成(unmounted)两个周期函数不在执行。
此时，点击卸载/挂载按钮，组件卸载后再次挂载，会保持上一次tab的选中状态