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标 ...
随机推荐
- git 创建分支并提交代码
1.查看所有分支 git branch -a 2.查看当前分支 git branch 3.新建一个分支 git branch feature-xx 4.切换到新建分支上面 git checkout f ...
- docker学习笔记-02:docker常用命令
一.帮助命令: 1.查看版本:docker version 2.查看信息:docker info 3.查看帮助信息:docker --help 二.镜像命令: (一).查看已有镜像: 1.命令:doc ...
- java执行操作系统脚本
http://www.cnblogs.com/bencakes/p/6139477.html 以前只是知道Runtime.getRuntime().exec(command);这种用法,但是有时候命令 ...
- Day7 - G - Divisors POJ - 2992
Your task in this problem is to determine the number of divisors of Cnk. Just for fun -- or do you n ...
- FULLTEXT INDEX全文索引
给现有的wxinfo表的sourceUrl 字段创建全文索引 ALTER TABLE wxinfo ADD FULLTEXT INDEX sourceUrl (sourceUrl) 创建全文索引前: ...
- spring mvc绑定参数之日期类型转换
问题复现步骤: 1.提交表单,参数为: 2.接收参数类型为product实体类,如下 3.错误日志如下: org.springframework.validation.BindException: o ...
- apache flink源码挖坑 (未完待续)
Apache Flink 源码解读(一) By yyz940922原创 项目模块 (除去.git, .github, .idea, docs等): flink-annotations: flink ...
- opencv python运动人体检测
采用非极大值抑制,将重叠的框合并成一个. # import the necessary packages from imutils.object_detection import non_max_su ...
- Docker PHP 例子
版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...
- main:处理命令行选项
#include<iostream> #include<stdlib.h> using namespace std; int main(int argc, char** arg ...