vue 数据缓存和懒加载

1.有些时候，不希望已经请求过的数据，再次请求，重复执行刷新操作，我们就需要使用数据缓存，

一、第一种方式，也是通用的思路，利用一个空数组，或者直接以存在Session Storage，这种页面级缓存，需要

页面没有被销毁，每次请求前先查看用于存储的数据中是否有数据，没有再发起请求，具体实现代码如下：

// 缓存对象，用于缓存查询到的商品列表数据ProductList
	// key: 使用 categoryId
	// value: 使用根据 categoryId 查询到的 productList 值
	const cache = {}

	// 页面级数据缓存
	export default {
		name: "CategoryList",
		data() {
			return {
				productList: []
			}
		},
		methods: {
			// 查询数据
			getCategoryListData(categoryId) {
				// 判断是否在缓存中保存待请求 categoryId 对应的数据
				if (Object.keys(cache).includes(categoryId)) { // 缓存中存在，则直接使用
					this.productList = cache[categoryId]
				} else { // 缓存中不存在，则ajax请求
					// 发起ajax请求(笔者已将请求定义到全局，主要观看思路)
					this.$http.getProductList(categoryId)
							.then(res => {
								this.productList = res.list
								// 请求到的数据加入缓存
								cache[categoryId] = res.list
							})
				}
			},

二，使用vue自带的缓存keep-alive(组件)

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 同时，页面也会失去2个钩子函数 created 和mounted

使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。 这也表示被组件包裹的的组件将不会重新渲染，所以需要我们在特定的情况下强制刷新某些组件

利用include、exclude属性

<keep-alive include="bookLists,bookLists">
      <component>
  </component>
</keep-alive>
<keep-alive exclude="indexLists">
      <component>
  </component>
</keep-alive>

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存，（值也可以可以用逗号分隔字符串、正则表达式或一个数组 ）

当然有人会想，这个name改写在哪？ 这个值就是定义组件时的name选项

// 组件 "bookLists"
export default {
  name: 'bookLists',
  data () {
    return {}
  }
}

2.5版后新增加max属性

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
  <component ></component>
</keep-alive>

vue-router 利用meta属性实现缓存

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

//在路由中定义，通过meta定义该页面是否需要缓存
export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

<keep-alivev v-if="this.$route.meat.keepAlive">
  <router-view ></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive  v-if="!this.$router.meta.keepAlive">
  <router-view ><router-view  />
</keep-alive>
<!--这里是不会被缓存的组件-->

路由懒加载

在routes.js 将import Home from “/user/index”

改成cosnt Home =（）=>import("/user/index")//这样就能实现路由分片打包，按需加载

import Vue from 'vue'
import Router from 'vue-router'
 cosnt  Home =（）=>import("/user/index")
export default new Router({
    routes: [
        //第一种方式
        {
           path:'/',
          name:'home',
          components:Home,  
        },
        //第二种方式
       {
          path: '/login',
           component: () =>{
               import('@/views/login/index'),
           }
        },
    ]
        
    }
})