vue中input标签缓存每个input对应的值

有一个卡片列表页面,点击卡片,右侧会弹出一个input框,要求切换卡片或者切换页面的时候缓存下每个卡片对应的值
刚开始想的是用keep-alive来实现,但是研究了下keepAlive好像是针对组件的,整体一个组件进行缓存,
而我的input框只是一个部分框,所以感觉实现起来不太好.

原理 input框失去焦点的时候存储下值,页面跳转的走的时候存到session中,跳转回来的时候从session中获取下基本就满足需求了

    data(){
        return{
            sendMessage:{}//{'id1':'你好','id2':'我们','id3':'他们','id4':'欧克'}
        }
    },
    methods:{
        //input框失去焦点的时候
        msgBlur(){
            //id订单id
            this.sendMessage[id]=this.msg;
        },
        //卡片点击的时候获取值并赋值
        msgList(id){
            this.msg=this.sendMessage[id]?this.sendMessage[id]:"";
        }
    },
    //路由跳转的时候
    beforeRouteLeave(to,from,next){
        sessionStroage.setItem("doctorSendMsg",JSON.stringify(this.sendMessage))
        next();
    },
    //路由跳转回来的时候
    beforeRouteEnter(to,from,next){
        next((vm)=>{
            this.sendMessage=JSON.parse(sessionStroage.getItem("doctorSendMsg"))
        })
    }

keep-alive详解(转载 做笔记)

项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大
程度上减少接口请求，减小服务器压力

在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，
对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，

-----------
在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载， 默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据
以上两种情景都会带来很不好的用户体验。此时，就需要对列表页面进行路由缓存。
-----------
在Vue-Router中可以使用keep-alive进行路由页面缓存。

Vue中提供了一个内置组件keep-alive，使用<keep-alive>元素将动态组件包裹起来，内部组件就会被缓存起来。

<keep-alive>包裹的组件，加载过的页面，再次进入时，是不会执行页面第一次进入时的部分生命周期函数。

<keep-alive>包裹的组件会新增两个生命周期函数activated和deactivated.

两个属性include和exclude可以让<keep-alive>实现有条件的进行缓存。

include包含的组件会被进行缓存，exclude包含的组件不会被缓存。


```
 <keep-alive exclude="chesc-src,select-oa"></keep-alive>
```