vue.js+vue-router+webpack keep-alive用法

本文是机遇

提纲：

 

• 现有需求
• 各个解决方案的优缺点

• 相关的问题延伸
• keep-alive使用详解

 

现有需求

 

每一个项目中都存在许多列表数据展现页面，并且一般包含一些筛选条件以及分页。

 

 

而且，点击表格中的某一列须要进行路由跳转进入到详情／添加／编辑页面。

 

比较好的用户体验就是，从详情／添加／编辑页面返回以后但愿列表页保留上次离开时的筛选条件和页码。可是正常状况下路由跳转以后实例已经被销毁。

 

可选的解决方案

1.保留状态数据：

     利用state存储状态，如筛选的品牌，时间范围，分页。在路由跳转到详情／添加／编辑的时候存储到state（vuex）中，若是跳转到其它路由就重置。

     缺点：每一个列表的筛选条件有差异，还要在每一个列表实例建立时读取状态（麻烦），可是也可使用computed属性返回状态。

 

2.保留页面，保留实例：

      keep-alive,在路由跳转时并无销毁实例。

keep-alive

使用原理：

　　1.包裹动态组件时会缓存组件实例，而不是销毁　　

　　2.keep-alive内路由切换时会调用activated和deactivated这两个钩子

　　

使用方法：

• 　　套在router-view外面，受到影响的范围就是router-view 里面的路由跳转。

　　

• vue 2.1.0版本新增include和exclude属性以选择性的缓存哪些组件（感受使用范围比较窄，有须要的本身看）

使用条件：

• vue.js 1.0

 

• vue.js 2.0 

 

• 非函数式组件

          什么是函数式组件？

                 render函数中建立模版内容（通常咱们用不上，因此这个条件基本上没影响）

 

使用须要注意问题：

 

1.要用在transition里面（具体缘由不清楚）

 

2.一旦根路由组件外面用到keep-alive,里面的全部路由跳转都会受到影响

•  针对须要保留状态的列表页，在activated钩子里面执行想要更新的操做，好比更新列表数据：

     

 

     场景需求：

          mounted或者created钩子里面获取列表数据

          路由离开以后跳转回来，mounted或者created钩子不会被调用，可是我须要更新数据。

     解决方法：

          1.定义firstIn属性，初始化为true,表示是否第一次进入该路由。且在第一次执行activated钩子的时候将该值置为false。

          2.把mounted或者created钩子中的数据初始化操做转移到activated钩子中。

          

•      针对不须要保留状态的其它页面，直接添加deactivated钩子并销毁实例就能够了。

     

 

3.发生菜单级别的跳转是否须要从新渲染

       

    注意每个条件分支必定要执行next，不然实例被销毁了页面就不会被从新渲染。

 

其它问题：

 

1.非keep-alive包围的路由组件的activated和deactivated钩子是不会被触发的。举个例子：

　

假设路由跟节点有keep-alive包裹：

• AC两个组件均可以被触发activated和deactivated钩子
• BD不会被触发activated和deactivated钩子，由于BD组件不是路由组件
• F也不会被触发，即便F是路由组件，可是，若是keep-alive有包裹E组件中的router-view，则F也能够被触发

总结一下

优势：

1.简单粗暴

2.相比于计算属性更脱离实际场景一些

缺点：

1.对于不须要缓存的路由都须要调用destroy 方法销毁。