路由页面缓存开启 以及 keep-alive 给你埋下的坑
为什么要用keep-alive呢, 因为这个会缓存dom模板, 下次再回到这个页面, 就可以利用这个已经渲染好的dom结构了,
如果数据不一样, 也会启用 virtualDoM 进行diff更新, 这样也能节省 从 模板解析 到 html 这段时间, 不用重新再去
分析模板, 特别是地图应用, 应为地图绘制耗性能,地图一般是不变的, 只有数据发现变化
做成饼 开口 咬一下变形状 吃下去
created mounted activated deactivated
1. mounted以后就已经生成ahtml了, 如果启用了keep-alive, 就不在开口, 有新数据直接咬
所以在activate去ajax数据, 否则数据不会更新
2. 另外, 要获取路由的query数据, 也是在 active 周期去拿,并做一些赋值, 而不能像以前那样直接
在data里面获取 并赋值
this.email = this.$route.query.email
this.activeIndex = this.$route.params.activeIndex
3. 既然你缓存了html, 如何防止多次事件绑定, 触发多次问题,
解决方法是 在mounted绑定事件, 以为他只执行一次, 如果是新插入的, 可以用事件代理解决
或者在active中先解绑, 再绑定。。
http://xiangsongtao.com/article/5853b2c0044bf1353af82fbf
路由页面缓存开启 以及 keep-alive 给你埋下的坑的更多相关文章
- keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
原文链接: 点我 在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时 <keep-alive> 便可以派上用场了. <keep-alive& ...
- Vue 之keep-alive的使用,实现页面缓存
什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件 ...
- Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
转载:http://freeloda.blog.51cto.com/2033581/1288553 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负 ...
- Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解
大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...
- nginx反向代理+缓存开启+url重写+负载均衡(带健康探测)的部署记录
在日常运维工作中,运维人员会时常使用到nginx的反向代理,负载均衡以及缓存等功能来优化web服务性能. 废话不多说,下面对测试环境下的nginx反向代理+缓存开启+url重写+负载均衡(带健康探测) ...
- Nginx 反向代理、负载均衡、页面缓存、URL重写、读写分离及简单双机热备详解
大纲 一.前言 二.环境准备 三.安装与配置Nginx (windows下nginx安装.配置与使用) 四.Nginx之反向代理 五.Nginx之负载均衡 (负载均衡算法:nginx负载算法 up ...
- Nginx反向代理 负载均衡 页面缓存 URL重写及读写分离
大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...
- [转载]Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...
- angular页面缓存与页面刷新
angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...
随机推荐
- CENTOS下Python 升级后YUM无法使用的解决办法
Python有很多实用的工具,安装依赖python版本较高,升级Python后导致yum无法使用. 原因: 系统自带的yum依赖Python老版本,升级后不兼容 解决办法: 1. 列出所有版本,确定老 ...
- 分享一个javascript alert精简框架
如果你不喜欢浏览器自带的alert你可以尝试总共不超过10KB somke js 下载地址:http://smoke-js.com/ 使用方法 somke.alert("hello wor ...
- DataOutputStream的writeBytes(String s)
最近,在关于网络请求中有用到DataOutputStraem中的writeBytes()方法,然而就是这个问题,导致了传输中文时就出现问题,着实困扰了很长一段时间. 后来,服务器端同事建议我使用Dat ...
- 【stanford C++】字符串(String)与流(Stream)
字符串(String)与流(Stream) 一.C++中字符串(String) 字符串(String):就是(可能是空的)字符序列. C++中的字符串在概念上和Java中的字符串类似. C++字符串用 ...
- VS2012下基于Glut OpenGL glDepthMask示例程序:
glDepthMask (GLboolean flag)函数可以决定将他之后的数据不写入深度缓冲区.当flag为GL_TRUE时之后的数据不写入深度缓冲区,即使启用了深度缓冲区测试功能. 使用上一个D ...
- 排序算法用C++的基本算法实现十个数排序
本文个人在青岛喝咖啡的时候突然想到的...近期就有想写几篇关于排序算法的文章,所以回家到之后就奋笔疾书的写出来发布了 冒泡排序法 道理: 它重复地访问过要排序的数列,一次比较两个元素,如果他们的顺序错 ...
- iOS开发-内存管理
内存管理 对于这篇呢,其实现在都是ARC模式,正常状态下基本不用我们去手动释放内存,所以如果不是要面试呀.装逼或者扎实功底的,就先别看了或者了解下即可,因为像面试时,有些面试官想看你的基础时,就有些人 ...
- unity 内置的CG结构解析
一.Cg顶点程序必须在结构中传递顶点数据.几种常用的顶点结构定义在文件UnityCG.cginc中.在大部分情况下仅仅使用它们就够了.结构如下: 1.appdata_base: 包含顶点位置,法线和一 ...
- Redmine管理项目3-调整用户显示格式
在 Redmine 中新建用户时是这样的: 必须指定姓氏.名字,然后 Redmine 默认是按“名字 姓氏”这种方式显示用户.比如“张三”,会显示成“三张”……看起来好别扭啊. 怎么调整呢,参看 Re ...
- swift3.0 运行时获取类的属性
//定义Person类 class Person: NSObject { var name: String? //注意这里基本数据类型我定义的是必选属性 var age: Int = override ...