缓存组件
keep-alive
缓存标签组件
缓存组件的生命周期钩子函数
activated
激活时状态deactivated
失活时状态
注意:
1.使用keep-alive包裹的组件就是缓存组件
2.只有在缓存组件才会出现缓存组件的生命周期钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 作用域 -->
<div id="app">
<!-- 方式二 -->
<button @click="change('v-login')">登录</button>
<button @click="change('v-reg')">注册</button>
<button @click="change('v-home')">首页</button>
<!-- 方式二: component 标签组件 -->
<!-- keep-alive 缓存标签组件 -->
<keep-alive>
<component :is="isShow"></component>
</keep-alive>
</div>
<!-- login组件 -->
<template id="login">
<div class="login">
<h1>{{title}}</h1>
</div>
</template>
<!-- reg组件 -->
<template id="reg">
<div class="reg">
<h1>{{title}}</h1>
</div>
</template>
<!-- home组件 -->
<template id="home">
<div class="home">
<h1>{{title}}</h1>
</div>
</template>
<script>
const vLogin = {
template:'#login',
data(){
return {
title:'欢迎登录'
}
},
// 创建完成
created(){
console.log('login-create');
},
// 激活时的状态
activated(){
console.log('login-activated');
},
// 失活时的状态
deactivated(){
console.log('login-deactivated');
}
}
const vReg = {
template:'#reg',
data(){
return {
title:'欢迎注册'
}
},
// 创建完成
created(){
console.log('reg-create');
},
// 激活时的状态
activated(){
console.log('reg-activated');
},
// 失活时的状态
deactivated(){
console.log('reg-deactivated');
}
}
const vHome = {
template:'#home',
data(){
return {
title:'欢迎来到德玛西亚'
}
},
// 创建完成
created(){
console.log('home-create');
},
// 激活时的状态
activated(){
console.log('home-activated');
},
// 失活时的状态
deactivated(){
console.log('home-deactivated');
}
}
// 实例化vue
new Vue({
el:'#app',
data:{
isShow:'v-login'
},
methods:{
change(name){
this.isShow = name;
}
},
components:{
vLogin,
vReg,
vHome,
}
})
</script>
</body>
</html>
总结:
vue中系统自动注入的标签:
template
component
transition
keep-alive(缓存标签)