Vue动态路由缓存不相互影响的解决办法
作者:冬日夜已眠 发布时间:2024-05-13 09:44:16
关于react与vue中的key
之前在学习react的时候,常常遇到循环渲染组件时会提示需要在循环组件中加上key属性,比如有一组列表:
import React, { Component } from 'react';
export default calss MainApp extends Component {
state = {
student: [
{
name: 'Jenny',
id: 'a001'
},
{
name: 'Jerry',
id: 'a002'
},
]
}
render() {
return (
<div>
<ul>
{
this.state.student.map(item => {
// key是必须的属性,不然浏览器会抛出错误提示
return (<li key={item.id}>{item.name}</li>)
})
}
</ul>
</div>
)
}
}
可能对这个key不是太了解,或者也不许要太深入地去了解它,只知道在循环渲染组件时,随手加上这个属性就好。摘自网上的的文章的总结,key的作用为
key的作用主要是为了高效的更新虚拟DOM
虽然不是很懂,但也装作大切大悟的样子。key是一个给框架内部用的,我们只管给它加上去就好。
Vue中的key
同样有一个vue的组件:
<template>
<div>
<ul>
<!-- key是必须的属性,不然浏览器会抛出错误提示 -->
<li v-for="itme in student" :key={item.id}>{{item.name}}</li>
</ul>
</div>
</template>
<script>
import vue from 'vue';
import { Component } from 'vue-property-decorator'
@Component
export default calss MainApp extends vue {
student = [
{
name: 'Jenny',
id: 'a001'
},
{
name: 'Jerry',
id: 'a002'
},
]
}
</script>
同样的,回到vue中的key,其实也类似,解释key的作用,就不得不介绍一下虚拟DOM的diff算法了...算了,我也不是很懂
简单理解就是react与vue内部判断组件的一个标识,用于更新或者重用组件的一个重要属性
更新
key用于更新:是框架内部的算法实现,一两句话也说不清楚(主要是我也不懂这个算法),简单理解为当数据更新了,框架内部会判断更新页面哪些DOM元素需要更新删除等操作;
重用
key用于组件重用:其实key不止是在map或者v-for中使用,我们也也可以在其他组件上使用这个属性(至于哪个组件可以加,小孩子才做选择,我们的目标是全都加!),当然加了貌似也没什么毛病,只是加了显得有些多余!
在做SPA的时候,我们都会有一个主组件App.vue:
<template>
<div id="app">
<div>
<keep-alive>
<router-view />
</keep-alive>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
export default class MainApp extends Vue {
}
</script>
上面代码会把页面全部都缓存下来(路由切换回来的时候,页面表单填写的内容没有被清空),这是应为在<router-view />的外面包裹着keep-alive标签, 页面数据都保留下来了,避免用户切换路由,数据丢失的情况,看似很完美!
比如一个产品页面:
当两个路由都使用同一个组件如Product.vue这个组件时,来回切换两个路由,两个页面填写的东西就会共用!切换页面时,发现页面自动填写了上个页面的东西,这并不是我们想要的!
如果页面比较少, 比如只有A、B两个产品,可以每个页面都定义一个路由地址,并且name属性不一样的值:
{
path: '/product',
name: 'product',
component: Product,
children: [
{
path: 'a',
name: 'aProduct',
component: Detail
},
{
path: 'b',
name: 'bProduct',
component: Detail
},
]
}
这时这样<router-view :key="$route.name"/>
就解决上面的问题了
But,页面较多的时候,定义路由就不能像上面这样定义了:
{
path: '/product',
name: 'product',
component: Product,
children: [
{
path: 'detail/:id',
name: 'aProduct',
component: Detail
},
]
}
此时路由变成了动态的了,那么,key就不能取name的值了,此时就需要引入一个变量来存储路由的历史记录了,当路由切换时,在历史记录中匹配相应的路由,在历史记录中保存的一个位置值,取出来赋值个key就可以了
嗯,前面好像废话有点多,而且貌似有骗标题的嫌疑,其实理解key这个属性,对于解决页面缓存,组件重复不相互影响有重要的作用。
来源:https://juejin.im/post/5c6a6276e51d457fd52ee74e


猜你喜欢
- 最近将Jesse James Garrett的《用户体验的要素》一书读了两遍,做一些简要的摘录并添加一些个人注释。当然,一本好书绝对不是简单
- 本文实例讲述了django框架自定义用户表操作。分享给大家供大家参考,具体如下:django中已经给我生成默认的User表,其中的字段已经可
- 我认为,出现这个问题的原因有以下几点: 1、客户端禁用了cookie 2、浏览器出现问题,暂时无法存取cookie 3、php.ini中的s
- 前言对于刚刚下载好的pycharm,初学者使用会有一些问题,这里将介绍关于字体,背景,这些简单的设置将会提升编程的舒适度(下面以PyChar
- 本文实例分析了Python字符串和文件操作常用函数。分享给大家供大家参考。具体如下:# -*- coding: UTF-8 -*-'
- InnoDB存储引擎的关键特性包括插入缓冲、两次写(double write)、自适应哈希索引(adaptive hash index)。这
- 1:strip()方法去除字符串开头或者结尾的空格>>> a = " a b c ">>&
- 1 减少HTTP请求数量 (Minimize HTTP Requests) tag:content80%的用户响应时间被花费在前端
- Mysql Explain 详解一.语法explain < table_name >例如: explain select * f
- 查询效率分析:子查询为确保消除重复值,必须为外部查询的每个结果都处理嵌套查询。在这种情况下可以考虑用联接查询来取代。如果要用子查询,那就用E
- 什么是AjaxAjax基本概念Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScr
- 一、前言我想介绍这些功能的主要原因是它们可以帮助您避免编写循环。在某些情况下,循环运行可能会很昂贵,除此之外,这些功能将有助于提高速度。以下
- 因为使用python+selenium有时候需要获取当前文件的上一级目录,找了一段时间找到了,在此记录下来;os.path.dirname(
- Python语言的崛起让大家对web、爬虫、数据分析、数据挖掘等十分感兴趣。数据挖掘就业前景怎么样?关于这个问题的回答,大家首先要知道什么是
- 问题背景问题背景是在,由于视频采集端使用的是H264编码采集的裸流,而网络流媒体大多是以FLV为主的直播方式进行的,为了实现实时直播,当前是
- 本文实例讲述了MySQL查看、创建和删除索引的方法。分享给大家供大家参考。具体如下:1.索引作用在索引列上,除了上面提到的有序查找之外,数据
- 笛卡尔坐标系对于平面坐标系,任一射线OP与x轴夹角θ的范围,可以取[0,2π)或者(-π,&
- 前言本篇来学习在pytest中使用yaml编写测试用例项目结构conftest.py只需在 conftest.py 即可实现使用yaml编写
- 开篇语本文主要是回顾下从项目创建到生成数据到数据库(代码优先)的全部过程。采用EFCore作为ORM框架。本次示例环境:vs2019、net
- 这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js。代码还是很简便的 1. 判断文件lo