vue中路由缓存问题产生的原因是什么?解决方式有哪些?

1. 缓存产生的原因
   vue-router 为了性能考虑 如果路径不变 对应的组件也不会重新渲染

2. 导致的问题
   组件不渲染  生命周期钩子函数也就不执行  依赖钩子函数发送网络请求的逻辑就无法执行
   新数据无法获取 

3. 解决思路
   根据思路: 
     1. 组件的生命周期钩子函数重新执行
     2. 把发送网络请求的函数重新执行
     
   方案: 
     1. key  二级路由 router-view :key="$route.fullPath"
     2. onBeforeRouteUpdate 每次路由更新都会重新执行 
        onBeforeRouteUpdate((to)=>{
          loadData(to.params.id)
        })


   如何选择?
     1. 大多数情况 都选择key 
     2. 如果性能要求比较高 选择第二种方案
     
  性能问题
     加上key  组件重新渲染 组件会进行一个从无到有的过程 (耗费的资源多)
     onBeforeRouteUpdate  路由更新之后 只会执行自己的回调函数  

你可能感兴趣的:(vue,vue3,vue.js,javascript,ecmascript)