当前位置:首页 » 硬盘大全 » vue缓存新版本发布
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

vue缓存新版本发布

发布时间: 2023-03-19 05:21:39

1. 使用vue框架开发,版本更新,怎么解决用户浏览器缓存问题

vue-cli里的默认配置,css和js的名字都加了哈希值,所以新版本css、js和就旧版本的名字是不同的,不会有缓存问题。

不过值得注意的是,把打包好的index.html放到服务器里去的时候,index.html在服务器端可能是有缓存的,这需要在服务器配置不让缓存index.html。

2. vue 缓存组件keep-alive

kee-alive 是 Vue 内置的一个组件, 可以使被包含的组件保留状态,或避免重新渲染 。也就是所谓的组件缓存

keep-alive是一个抽象的组件,缓存的组件不会被mounted,为此提供activated和deactivated钩子函数
在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存,优先级大于include) 。

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串,数组,以及正则表达式,只有匹配的组件会被缓存)

exclude 排除的组件(以为字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存)

max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

配合router使用

1.keep-alive 先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作,因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时,以 exclude 优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。
4.包含在 keep-alive 中,但符合 exclude ,不会调用activated和 deactivated。

参考 https://juejin.cn/post/6844903918313406472
参考 https://www.imooc.com/article/302879

3. vue.js 系统每次发布新版本,必须清理浏览器缓存怎么解决

这样的情况个人建议用360安全卫士电脑清理功能清理浏览器缓冲,然后重新打开就可以正常。

4. Vue 怎么缓存当前的组件缓存后怎么更新说说你对keep-alive的理解是什么

keep-alive 是 vue 中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

keep-alive 可以设置以下 props 属性:

关于 keep-alive 的基本用法:

使用 includes 和 exclude :

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子( activated 与 deactivated ):

使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive

举个栗子:

当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ,这时候列表页应该是需要 keep-alive

从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ,这时候可以按需来控制页面的 keep-alive

在路由中设置 keepAlive 属性判断是否需要缓存

使用 <keep-alive>

keep-alive 是 vue 中内置的一个组件

源码位置:src/core/components/keep-alive.js

可以看到该组件没有 template ,而是用了 render ,在组件渲染的时候会自动执行 render 函数

this.cache 是一个对象,用来存储需要缓存的组件,它将以如下形式存储:

在组件销毁的时候执行 pruneCacheEntry 函数

在 mounted 钩子函数中观测 include 和 exclude 的变化,如下:

如果 include 或 exclude 发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行 pruneCache 函数,函数如下:

在该函数内对 this.cache 对象进行遍历,取出每一项的 name 值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可

关于 keep-alive 的最强大缓存功能是在 render 函数中实现

首先获取组件的 key 值:

拿到 key 值后去 this.cache 对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,如下:

直接从缓存中拿 vnode 的组件实例,此时重新调整该组件 key 的顺序,将其从原来的地方删掉并重新放在 this.keys 中最后一个

this.cache 对象中没有该 key 值的情况,如下:

表明该组件还没有被缓存过,则以该组件的 key 为键,组件 vnode 为值,将其存入 this.cache 中,并且把 key 存入 this.keys 中

此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ,如果超过了,则把第一个缓存组件删掉

解决方案可以有以下两种:

每次组件渲染的时候,都会执行 beforeRouteEnter

在 keep-alive 缓存的组件被激活的时候,都会执行 actived 钩子

注意:服务器端渲染期间 avtived 不被调用

5. vue页面缓存(keepAlive)

同人博客搬迁~~~~(播客主页: https://www.cnblogs.com/epines/ )

页面缓存在页面中长期会使用到,可以更快速的在页面切换期间的资源获取

主要是用keep-alive实现

在vue项目中,相关的写法比较多,还有一些注意点需要仔细

第一种方式

在App.vue中

添加标签

  <keep-alive>

      <router-view />

  </keep-alive>

这会就是所有的页面都会被缓存

这里做了两个页面的相互跳转,分别写了一个输入框,在输入内容后,跳转时,输入的内容因为缓存的原因会被保留

 如果存在某些页面需要缓存,那么可以通过keep-alive的属性去处理

其中就是include和exclude

include:名称匹配的组件才会被缓存,其中可以写字符串或正则表达式

exclude:名称匹配的组件不会被缓存,其中同样是字符串或正则表达式

这里的名称是指组件的名称

<script>

export default {

  name: 'HelloWorld'

}

</script>

     第二种方式:

     在路由中进行设置通过添加meta,route/index.js     

export default new Router({

  routes: [{

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld,

      meta: {

        keepAlive: true // 该路由会被缓存

      }

    },

    {

      path: '/ss',

      name: 'ss',

      component: Ss,

meta: {        keepAlive:false // 该路由不会被缓存,不需要缓存的时候该属性可以不用写      }

}]

})

这时候页面还需要通过该属性进行判断是否缓存

在App.vue  

  <keep-alive>

      <router-view v-if="$route.meta.keepAlive">

      </router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive">

    </router-view>

这样写有个优点就是,需要缓存不需要缓存的name可以随便写,不需要做什么规律性的去写出一个合适的正则去匹配上,就会更加灵活些

 常见的应用场景可以是,列表到详情页,从详情页返回到列表页,如果说列表页没有做缓存,在单页面下,会直接返回列表首页(存在分页的情况),就不能直接返回至之前离开的列表页,所以这个地方在列表页添加页面缓存后,可以做到返回至之前离开的列表页

 没有缓存的时候,返回列表:

 有缓存的时候,返回列表

所以从某些程度上来讲,即增加了页面的响应速度,又增加了用户体验,总体来说,还是比较实用的

6. vue js版本更新,但用户的浏览器有缓存之前的vue文件

你的vuejs版本更新难道是直接覆盖服务器文件,而不是

/vue/2.5.13/vue.js

/vue/2.5.12/vue.js

这样分版本存放?赶紧改吧