Vue 组件传递对象采用 keep-alive 与 localStorage 对比.md_综合

Vue 组件传递对象采用 keep-alive 与 localStorage 对比

两个 vue 组件，A 与 B，A通过路由的方式跳转到B，需要向B传递数据，我们这里传递的数据是由对象组成的数组，也就是引用类型变量。本篇文章的 A 是始终缓存的，也就是始终keepAlive === true。

A页面时一个简单的商品列表及购物车页面：

在这里插入图片描述

A中点击提交按钮会跳转到B，B是展示订单的页面：

在这里插入图片描述

我们主要考虑可能的用户操作，1.A页面中点击提交按钮路由到B，2.前进后退导航，3.手动刷新页面。看看这些情况下会有怎样的效果。

一、最普通的情况下，A路由跳转到B。

<router-link :to="{ path: '/order',query:{ items: baskets }}"></router-link> // 这里的 baskets 是 [{},{}]类型

B中在created生命钩子函数获取数据

this.items = this.$route.query.items;

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true	false	created	B中同步更新	B中数据丢失	B中数据丢失

二、B也应用keep-alive，仍在 `created`时获取数据

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true	true	created	B返回到A，修改A中数据，再跳转到B，B中数据不更新	B页面缓存	B中数据丢失

三、B应用 keep-alive,但是在 activated时获取数据, `activated`将会再keep-alive组件激活时使用

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true	true	activated	B返回到A，修改A中数据，再跳转到B，B中数据同步更新	B页面数据不会缓存	B中数据丢失

四、应用 localStorage，B不应用keep-alive，created时获取数据

/** * @method beforeRouteLeave * @description 跳转到 Order 路由时，把购物车数据存储到 localStorage 中 */ beforeRouteLeave(to, from, next) {
     try{
     if(localStorage.hasOwnProperty('items')){
     localStorage.removeItem('items');}if(to.path.indexOf('/order') !== -1){
     localStorage.setItem('items', JSON.stringify(this.baskets)); }}catch(err){
     throw new Error(err);}next();}

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true	false	created	B返回到A，修改A中数据，再跳转到B，B中数据同步更新	B页面数据缓存,且更新	B中数据不丢失，且更新

五、应用 localStorage，且B应用keep-alive，created时获取数据

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true	true	created	B返回到A，修改A中数据，再跳转到B，B中数据不更新	B页面数据缓存，不更新	B中数据不丢失，且更新

六、应用 localStorage，且B应用keep-alive，activated时获取数据

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true	true	activated	B返回到A，修改A中数据，再跳转到B，B中数据同步更新	B页面数据缓存，且更新	B中数据不丢失，且更新

通过四与六，我们发现，在应用了 loaclStorage 且 B不应用 keep-alive之后，A与B页面的数据时紧紧绑定的，B返回到A，修改了A中的数据，不论是通过点击提交按钮，还是前进后退导航，B中的数据都与A中同步。如果B中应用了 keep-alive 的话，那么就需要在 activated 中来获取数据，才能保证点击数据的同步。

总结：

1.对于引用型变量在组件之间通过路由传递，例如A->B，可以通过在A中使用 beforeRouteLeave 来将数据添加到localStorage 中，使得组件的数据是同步的。

2.在 1 的情况下，如果希望缓存 B 页面的话，需要在B中activated钩子函数来获取数据，才能保证引用类型数据的同步。

Vue 组件传递对象采用 keep-alive 与 localStorage 对比.md