路由页面缓存开启 以及 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来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...
随机推荐
- HDU 2073 无限的路
Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现上面的图还 ...
- Citrix 服务器虚拟化之三 Xenserver 网络管理
Citrix 服务器虚拟化之三 Xenserver 网络管理 每个Xenserver服务器都有一个或多个网络.XenServer 网络是虚拟的以太网交换机,它可以连接到外部接口(带或不带 VLAN 标 ...
- 当ArcGIS10.2遇到Teradata
随着计算机技术的不断发展,GIS技术也紧跟IT技术的热潮,从三维技术.到移动技术,从大数据技术到云计算技术,只要IT有的新技术,Esri ...
- 通用高性能 Windows Socket 组件 HP-Socket v2.2.2 更新发布
HP-Socket 是一套通用的高性能 Windows Socket 组件包,包含服务端组件(IOCP 模型)和客户端组件(Event Select 模型),广泛适用于 Windows 平台的 TCP ...
- 【Unity 3D】教程(1)建立场景
1.新建一个地形 在菜单中选择Terrain,新建一个地形 接下来在右边的“编辑高度”中,用笔刷绘出地形高度,如图: 2.地形纹理 接下来我们给地形贴上纹理,纹理资源我们使用unity自带的, 在Pr ...
- 将前台input中的数据异步传到后台并存入数据库
将前台input中的数据异步传到后台并存入数据库 先看图: 利用ajax异步交互数据,并不是以json数组的形式将数据传到后台,而是利用字符数组的形式将其传到后台.动态新增每一行数据,将每一列对应的数 ...
- SQL Server 2016 的「動態資料遮罩 (Dynamic Data Masking)」
一些特別注重資訊安全.個人資料的公司或產業 (如: 金融.保險業),通常「測試用資料庫」的資料,會加上「遮蔽:去識別化」的功能,避免個資外洩.以往必須自己撰寫 SQL 語句或 Stored Proce ...
- MongoDB应用案例:使用 MongoDB 存储日志数据
线上运行的服务会产生大量的运行及访问日志,日志里会包含一些错误.警告.及用户行为等信息,通常服务会以文本的形式记录日志信息,这样可读性强,方便于日常定位问题,但当产生大量的日志之后,要想从大量日志里挖 ...
- 【51Nod】1005 大数加法
给出2个大整数A,B,计算A+B的结果. Input 第1行:大数A 第2行:大数B (A,B的长度 <= 10000 需注意:A B有可能为负数) Output 输出A + B Input示例 ...
- mysql数据恢复问题
现象 mysql> drop database zabbix; Query OK, 104 rows affected (0.30 sec)mysql> exitBye[root@mysq ...