Vue动态路由缓存不相互影响的解决办法


Posted in Javascript onFebruary 19, 2019

关于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这个属性,对于解决页面缓存,组件重复不相互影响有重要的作用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 #Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
Vue结合后台导入导出Excel问题详解
Feb 19 #Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 #Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 #Javascript
小程序转发探索示例
Feb 19 #Javascript
JS异步执行结果获取的3种解决方式
Feb 19 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php实现字符串翻转的方法
2015/03/27 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python中lambda()的用法
2017/11/16 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
windows下python安装pip图文教程
2018/05/25 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
搞笑婚礼主持词
2014/03/13 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
2015元旦节寄语
2014/12/08 职场文书
子女赡养老人协议书
2016/03/23 职场文书