怎么推广微信小程序_Vue动态路由缓存不彼此影响

Vue动态路由缓存不相互影响的解决办法       这篇文章主要介绍了Vue动态路由缓存不相互影响的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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




扫描二维码分享到微信