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评估用户输入密码的强度实现代码
Nov 30 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
Javascript创建类和对象详解
May 31 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
浅谈React高阶组件
Mar 28 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
详解Puppeteer 入门教程
May 09 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
Vue使用axios出现options请求方法
May 30 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
晶体管来复再生式二管收音机
2021/03/02 无线电
一些php技巧与注意事项分析
2011/02/03 PHP
PHP简洁函数小结
2011/08/12 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python实现学员管理系统
2019/02/26 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python timeit模块的使用实践
2020/01/13 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
django中cookiecutter的使用教程
2020/12/03 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
报到证丢失证明
2014/01/11 职场文书
市场营销方案范文
2014/03/11 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL