Vue3路由缓存问题

问题场景

点击菜单切换页面,由于所有子菜单用的同一个组件(只是渲染数据不同),所以组件不会重新渲染(复用),请求不会发送,数据也就不会更新

产生原因

路由只有参数变化时,会复用组件实例

解决方案

  1. 给router-view添加key,实现强制更新

     2.使用beforeRouteUpdate导航钩子(监听路由变化的函数)

当路由变化时,将更新数据的函数放进去,只要路由发生变化就会调用函数更新数据

Vue3路由缓存问题_第1张图片

方案对比

对比两种方案,第一种是强制路由更新,这种方法简单粗暴,但对性能不友好,因为这样会使所有的组件全部更新,有一些可复用的也会被强制更新

例如下面的页面,圈住的不需要更新数据,但是使用第一种方法的话就会强制他一起更新,这样就会重复渲染相同的页面,比较耗性能

但是第二种方法对性能就很友好,beforeRouteUpdate检测到路由变化后,将需要更新数据对应的函数传入调用,可精细化控制

方案选择——总结

在意性能问题,选择onBeforeUpdate,精细化控制

不在意性能问题,选择key,简单粗暴

你可能感兴趣的:(前端,javascript,开发语言)