Vue keep alive如何使用(alive,keep,vue,开发技术)

希望大家仔细阅读，能够学有所成！

公共代码

路由（router/index.js）

importVuefrom'vue'
importVueRouterfrom'vue-router'
importParentfrom'../components/Parent'
Vue.use(VueRouter)
constroutes=[
{
path:'/',
name:'Parent',
component:Parent
}
]
constrouter=newVueRouter({
routes
})
exportdefaultrouter

生命周期mixin（mixins/LifeCycle.js）

下边的两个页面组件都要打印生命周期，所以我把它抽出作为mixin。

exportdefault{
computed:{
name(){
returnthis.$options.name
}
},
created(){
console.log('created==>'+this.name)
},
activated(){
console.log('activated==>'+this.name)
},
deactivated(){
console.log('deactivated==>'+this.name)
},
destroyed(){
console.log('destroyed==>'+this.name)
}
}

子页面组件

components/CompA.vue

<template>
<divclass="outer">
<div>
这是CompA
</div>
</div>
</template>
<script>
importLifeCyclefrom'../mixins/LifeCycle'
exportdefault{
name:'CompA',
mixins:[LifeCycle]
}
</script>
<stylescoped>
.outer{
margin:20px;
border:2pxsolidblue;
padding:20px;
}
</style>

components/CompB.vue

<template>
<divclass="outer">
这是CompB
</div>
</template>
<script>
importLifeCyclefrom'../mixins/LifeCycle'
exportdefault{
name:'CompB',
mixins:[LifeCycle]
}
</script>
<stylescoped>
.outer{
margin:20px;
border:2pxsolidblue;
padding:20px;
}
</style>

动态组件实例

不加keep-alive

代码

components/Parent.vue

<template>
<divclass="outer">
<div>
这是Parent
</div>
<br>
<button@click="useCompA">切换到CompA</button>
|
<button@click="useCompB">切换到CompB</button>
<component:is="componentName"></component>
</div>
</template>
<script>
importCompAfrom'./CompA'
importCompBfrom'./CompB'
exportdefault{
name:'Parent',
components:{
CompA,
CompB
},
data(){
return{
componentName:''
}
},
methods:{
useCompA(){
this.componentName='CompA'
},
useCompB(){
this.componentName='CompB'
}
}
}
</script>
<stylescoped>
.outer{
margin:20px;
border:2pxsolidred;
padding:20px;
}
</style>

测试

访问：http://localhost:8080/#/

可以发现：进入组件时调用created；离开组件时调用destroyed。

加keep-alive

代码

component/Parent.vue

将动态组件用keep-alive标签包起来。

<template>
<divclass="outer">
<div>
这是Parent
</div>
<br>
<button@click="useCompA">切换到CompA</button>
|
<button@click="useCompB">切换到CompB</button>
<keep-alive>
<component:is="componentName"></component>
</keep-alive>
</div>
</template>
<script>
importCompAfrom'./CompA'
importCompBfrom'./CompB'
exportdefault{
name:'Parent',
components:{
CompA,
CompB
},
data(){
return{
componentName:''
}
},
methods:{
useCompA(){
this.componentName='CompA'
},
useCompB(){
this.componentName='CompB'
}
}
}
</script>
<stylescoped>
.outer{
margin:20px;
border:2pxsolidred;
padding:20px;
}
</style>

测试

访问：http://localhost:8080/#/

可以发现：进入组件时调用created、activated；离开组件时调用deactivated（不调用destroyed）。

router-view实例

不加keep-alive

代码

修改路由设置（router/index.js）

importVuefrom'vue'
importVueRouterfrom'vue-router'
importParentfrom'../components/Parent'
importCompAfrom'../components/CompA'
importCompBfrom'../components/CompB'
Vue.use(VueRouter)
constroutes=[
{
path:'/',
name:'Parent',
component:Parent
},
{
path:'/compA',
name:'CompA',
component:CompA
},
{
path:'/compB',
name:'CompB',
component:CompB
}
]
constrouter=newVueRouter({
routes
})
exportdefaultrouter

修改入口组件（components/Parent.vue）

<template>
<divclass="outer">
<div>
这是Parent
</div>
<br>
<router-link:to="{name:'CompA'}">跳转到CompA</router-link>
|
<router-link:to="{name:'CompB'}">跳转到CompB</router-link>
<router-view></router-view>
</div>
</template>
<script>
exportdefault{
name:'Parent'
}
</script>
<stylescoped>
.outer{
margin:20px;
border:2pxsolidred;
padding:20px;
}
</style>

测试

访问：http://localhost:8080/#/

可以发现：进入路由组件时调用created；离开路由组件时调用destroyed。

加keep-alive（加到App.vue里）

修改App.vue

将router-view标签包裹在keep-alive标签里。

<template>
<divid="app">
<divid="nav">
<router-linkto="/">Home</router-link>
|
<router-linkto="/about">About</router-link>
</div>
<!--原来写法-->
<!--<router-view/>-->
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<style>
<!--省略-->
</style>

测试

访问：http://localhost:8080/#/

可以发现：进入组件时调用created、activated；离开组件时调用deactivated（不调用destroyed）。

加keep-alive（加到Parent.vue里）

说明

需要做如下两步：

• Parent.vue：将router-view包裹在keep-alive里边

• 将CompA和CompB的路由作为Parent的嵌套路由（Children）

如果只修改Parent.vue，将router-view包裹在keep-alive里边，这样是没用的，跟没有加keep-alive效果一样。

代码

修改components/Parent.vue

<template>
<divclass="outer">
<div>
这是Parent
</div>
<br>
<router-link:to="{name:'CompA'}">跳转到CompA</router-link>
|
<router-link:to="{name:'CompB'}">跳转到CompB</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
exportdefault{
name:'Parent'
}
</script>
<stylescoped>
.outer{
margin:20px;
border:2pxsolidred;
padding:20px;
}
</style>

修改路由（router/index.js）

importVuefrom'vue'
importVueRouterfrom'vue-router'
importParentfrom'../components/Parent'
importCompAfrom'../components/CompA'
importCompBfrom'../components/CompB'
Vue.use(VueRouter)
constroutes=[
{
path:'/',
name:'Parent',
component:Parent,
children:[
{
path:'/compA',
name:'CompA',
component:CompA
},
{
path:'/compB',
name:'CompB',
component:CompB
}
]
}
]
constrouter=newVueRouter({
routes
})
exportdefaultrouter

测试

访问：http://localhost:8080/#/