keep alive PHP,vue中keep-alive使用方法详解

这次给大家带来vue中keep-alive使用方法详解，vue中keep-alive使用的注意事项有哪些，下面就是实战案例，一起来看一下。

1.keep-alive的作用以及好处

在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

2.keep-alive的基本用法

在app.vue中

需要缓存的组件内容直接在router中添加：meta: {

keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存

}

3.keep-alive的生命周期

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入(前进或者后退)时，只触发activated。

下面看下vue中 keep-alive 的使用问题及解决方案

问题描述

在业务开发中，会有路由跳转但是返回需要保留数据的场景；vue 中提供了 keep-alive 来处理

解决方案

返回dom不让其重新刷新，在vue-view外面包一层, 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入(前进或者后退)时，只触发activated。

事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；

可以将是否包裹 keep-alive 通过参数配置；

//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签；

//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签；

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

keep alive PHP,vue中keep-alive使用方法详解相关推荐

android json mysql_Android通过json向MySQL中读写数据的方法详解【读取篇】
本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先要定义几个解析json的方法parseJsonMulti,代码如下: private vo ...
java中迭代器要导包吗_java 中迭代器的使用方法详解
java 中迭代器的使用方法详解前言: 迭代器模式将一个集合给封装起来,主要是为用户提供了一种遍历其内部元素的方式.迭代器模式有两个优点:①提供给用户一个遍历的方式,而没有暴露其内部实现细节:②把元 ...
php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
在HTML文档中使用JavaScript的方法详解
在HTML文档中使用JavaScript的方法详解本文详细介绍,在HTML文档(也称为HTML页面或网页)中使用JavaScript脚本代码的多种方法. 假设要用JS生成字符☆直角三角形实现Jav ...
无刷新跳转—关于history中pushState和replaceState方法详解
〝古人学问遗无力,少壮功夫老始成〞 **关于history中pushState和replaceState方法详解,**常码字不易,出精品更难,没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫 ...
webconfig的解决方案怎么添加_解决在Web.config或App.config中添加自定义配置的方法详解...
文档从网络中收集,已重新整理排版 .word 版本可编辑 . 欢迎下载支持 . 1 word 版本可编辑 . 欢迎下载支持 . 解决在 Web.config 或 App.config 中添加自定义配 ...
php接入qq登陆,thinkphp5中接入QQ登录方法详解
Thinkphp5中接入QQ登录操作,方法详解: 1.下载PHP SDK <点击进入下载页> 2.下载后的SDK解压,并运行install下的index.php 3.填写appid.app ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
style 里引用php变量,在VUE style中使用data中的变量的方法详解
最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要 ...

keep alive PHP,vue中keep-alive使用方法详解

keep alive PHP,vue中keep-alive使用方法详解相关推荐

最新文章

热门文章