您现在的位置是：网站首页> 编程资料编程资料

Vue--keep-alive使用实例详解_vue.js_

2023-05-24 373人已围观

简介 Vue--keep-alive使用实例详解_vue.js_

简介

说明

本文用示例介绍Vue的keep-alive的用法。

keep-alive标签主要用于保留组件状态或避免重新渲染。

官网网址

https://v2.cn.vuejs.org/v2/api/#keep-alive

相关网址

vue2中的keep-alive使用总结及注意事项

公共代码

路由（router/index.js）

import Vue from 'vue' import VueRouter from 'vue-router' import Parent from '../components/Parent' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Parent', component: Parent } ] const router = new VueRouter({ routes }) export default router

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

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

export default { computed: { name () { return this.$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

components/CompB.vue

动态组件实例

不加keep-alive

代码

components/Parent.vue

测试

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

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

加keep-alive

代码

component/Parent.vue

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

测试

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

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

router-view实例

不加keep-alive

代码

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

import Vue from 'vue' import VueRouter from 'vue-router' import Parent from '../components/Parent' import CompA from '../components/CompA' import CompB from '../components/CompB' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Parent', component: Parent }, { path: '/compA', name: 'CompA', component: CompA }, { path: '/compB', name: 'CompB', component: CompB } ] const router = new VueRouter({ routes }) export default router

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

测试

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

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

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

修改App.vue

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

测试

访问：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

修改路由（router/index.js）

import Vue from 'vue' import VueRouter from 'vue-router' import Parent from '../components/Parent' import CompA from '../components/CompA' import CompB from '../components/CompB' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Parent', component: Parent, children: [ { path: '/compA', name: 'CompA', component: CompA }, { path: '/compB', name: 'CompB', component: CompB } ] } ] const router = new VueRouter({ routes }) export default router

测试

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