part8 vue内置标签keep-alive对网页性能优化
我们网页请求时候 我们点击路由切换
可以看network中数据请求
因为每次路由切换都会执行mounted钩子函数 我们这个函数中数据请求
//每次切换路由,页面都会重新渲染
在根组件中使用 路由切换 标签包裹
<keep-alive>
<router-view/>
</ keep-alive>
包裹的内容会被缓存
//这样又一个弊端 我有的页面是需要重新进入发送请求的
这个标签带来一个新的生命周期函数
在此进入同一个一面会调用 activited生命周期函数(页面重新显示)
写一个判断
页面改变时候 内容更改 就再次发送ajax
2.知识点 可以通过路由传递参数
getHomeInfo () {
this.axios.get('/api/index.json?city=' + this.city)
.then(this.getHomeInfoSucc)
}, //传递了一个city的变量
//总结(!important)
// 比如一共两个页面 A和B A为首页
我们从B页面进入A页面要判断一下 B进A时候会改变A页面内容
那么我们就要把之前第一次进入A页面时候数据作为一个储存
当再次进入的时候 在函数acitivated函数中比较
part8 vue内置标签keep-alive对网页性能优化的更多相关文章
- Vue 内置指令 && 自定义指令
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- thinkphp 内置标签volist 控制换行
thinkphp 内置标签volist 控制换行 volist标签通常用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数组,可以直接使用volist标签进行 ...
- ThinkPHP中的内置标签
ThinkPHP中的内置标签 1.内置标签分类 闭合标签 <tag></tag> 开放标签 <tag /> 2.包含文件标签 主要功能:实现对文件的包含(类似于re ...
- JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门
2 JSP内置标签(美化+业务逻辑) 1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容 2)JSP内 ...
- Jsp的内置标签和jstl标签
1.内置标签(动作标签) 内置标签不需要再jsp页面导入标签 1).forward:请求的转发,格式如下 <%-- 作用与这个相同 <%request.getRequestDispatch ...
- 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签
学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签. jsp标签的分 ...
- Thinkphp中的内置标签用法
Thinkphp中的内置标签有:Volist,Foreach,For,Switch,比较标签,范围判断标签,IF,Present,Empty,Defined,Assign,Define,标签嵌套,im ...
- django中模板变量与内置标签以及过滤器
本文参考 官方文档 . 一 模板变量 格式: {{ variable_name }} variable_name 命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...
- JSP--JSP语法--指令---九大隐式对象--四大域对象--JSP内置标签--JavaBean的动作元素--MVC三层架构
一.JSP 原理:JSP其实就是一个servlet. Servlet负责业务逻辑处理,JSP只负责显示.开发中,JSP中不能有一行JAVA代码 二.JSP语法 1. JSP模板元素:JSP中HTML标 ...
随机推荐
- wx.previewimage预览返回会触发onshow的处理方法
最近做详情页,添加图片预览后竟然触发onshow的处理方法.就显得很尴尬.框架用的uni-app 解决方法 1.page外全局定义开关变量 var a; export default { } 2 .o ...
- 在普通WEB项目中使用Spring
Spring是一个对象容器,帮助我们管理项目中的对象,那么在web项目中哪些对象应该交给Spring管理呢? 项目中涉及的对象 我们回顾一下WEB项目中涉及的对象 Servlet Request ...
- HTML<figure> <figcaption> 标签定义图文并茂
本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...
- 调用dos
两个方法 function RunDosCommand(Command: string): string; var hReadPipe: THandle; hWritePipe: THandle; S ...
- Linux每日练习-批量删除用户,非脚本运行方式 20200225
- OpenMandriva或将放弃32位的支持
导读 除了Ubuntu计划在其19.10发行版中删除32位包之外,OpenMandriva开发团队也是另一个备受关注的Linux发行版起草计划,以取消对32位包的支持. OpenMandriva计划在 ...
- asp.net数据库增删改查demo
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 一个web项目中web.xml<context-param>的作用
转 <context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置 ...
- 032-session函数
<?php $username="guest1"; if(isset($username)) { session_name($username); } echo " ...
- 163-PHP 文本替换函数str_replace(四)
<?php $str='Hello world!'; //定义源字符串 $search=array('o','l','w'); //定义将被替换的字符数组 $replace=array('1', ...