关于vue的keep-alive

709 阅读2分钟

keep-alive

keep-alive是一个抽象组件用于缓存组件,提高性能,记忆页面历史,由于是一个抽象组件,所以并不会生成DOM节点

注意:keep-alive缓存的组件必须有名称,不支持缓存匿名组件,在缓存<router-view />时要注意,缓存的是组件的名称,而不是路由的名称

keep-alive组件里面的组件被激活时组件的activated、deactivated生命周期钩子会被执行

被keep-alive包裹的动态组件或router-view会缓存不活动的实例,再次被调用这些被缓存的实例会被再次复用,对于我们的某些不是需要实时更新的页面来说大大减少了性能上的消耗,不需要再次发送HTTP请求,但是同样也存在一个问题就是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面,这也就出现了例如我们使用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果,所以需要我们在特定的情况下强制刷新某些组件

  1. 利用include、exclude属性 include属性表示只有name属性为include中包含名字的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存exclude属性表示除了name属性为exclude中包含名字的组件不会被缓存,其它组件都会被缓存
  2. 利用berforeRouteEnter实现前进刷新,后退缓存 相关资料
  3. 利用第三方插件实现前进刷新,后退不缓存
  4. 官方提出的解决方案响应路由参数的变化

原文连接