Vue keep-alive 应用场景及解决办法

参考：vue中动态化的按需使用keep-alive

场景：

列表页有个添加按钮：
（1）从列表页进入详情页，从详情页返回列表页时保存列表页的状态，进入详情页记住列表页的滚动位置
（2）从添加按钮进入添加页
① 从添加页面进入某一项选择的编辑页面时，保存添加页面的数据及状态，选择后返回到添加页面，此时需要更新该项的数据，其余数据保持原有状态
② 从添加页面返回列表页面，然后再次点击添加按钮，此时进入添加页面需要更新整个页面

（一）给页面添加 keep-alive

场景：从添加页面进入某一项选择的编辑页面时，保存添加页面的数据及状态

在App.vue 文件中：

<template>
  <div id="app">
    <keep-alive>
      <!-- 需要缓存的视图组件 --> 
      <router-view v-if="$route.meta.keepAlive" /> 
    </keep-alive>
    <!-- 不需要缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在 router 路由文件中设置 meta

export default[
    {
        path:'/',
        name:'home',
        components:Home,
        meta:{
            keepAlive:true //需要被缓存的组件
        },
    },
    {
        path:'/book',
        name:'book',
        components:Book,
        meta:{
            keepAlive:false //不需要被缓存的组件
        }
    } 
]

（二）更新页面数据

场景：使用 keep-alive 缓存页面，返回页面时刷新部分数据
例子：点击邮寄地址-进入地址编辑页面-编辑后把数据传给父页面，并且父页面不刷新，只是地址更新

方法一： keep-alive 包裹住的页面都会被缓存，如果想刷新部分内容要启用activated函数，用法同created，activated只有在被keep-alive包裹时会触发，activated函数一进入页面就触发

activated(){
    // 赋值、更新数据
}

方法二： 监听路由，然后使用 this.$set() 方法 【这种方式要修改内容多的话做的判断有点多】

watch:{
  $route: {
    immediate: true,
    handler(to, from) {
      // 判断from，来自于哪个页面
      console.log("from", from);
      this.$set(this, 'positionList', 111)  //使用 $set 更新视图
    },
  },
}

（三）清除当前页面的 keep-alive

场景：从列表页面的添加按钮进入添加页面，从添加页面返回列表页面，然后再次点击添加按钮，此时进入添加页面需要更新整个页面。

在有 keep-alive 页面组件中，设置 beforeRouteLeave
例如：如果是从 NewBuild 这个页面进入当前页面，则清除缓存

beforeRouteLeave(to, from, next) {
  // 清除缓存
  if (to.name === "NewBuild") {
    this.$vnode.parent.componentInstance.cache = {};
    this.$vnode.parent.componentInstance.keys = [];
  }
  next();
},

（四）从列表页进入详情页，记住列表页的滚动位置

在列表页面（或着添加页面）中注册事件，步骤如下：
（1）在return中定义一个初始值 scroll

data(){
	return{
		scroll:"" //页面滚动初始值
	}
}

（2）在mouted中 ，mouted中的方法代表dom已经加载完毕

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},

（3）methods 用于存放页面函数

// 页面当前滚动状态
handleScroll () {
  this.scroll  = document.documentElement &&  document.documentElement.scrollTop
  // console.log('当前滚动位置', this.scroll)      
}

（4）activated 为keep-alive加载时调用

activated() {
  if(this.scroll > 0){
    window.scrollTo(0, this.scroll);
    this.scroll = 0;
    window.addEventListener('scroll', this.handleScroll);
  }
},

（5）deactivated 页面退出时关闭事件 防止其他页面出现问题

deactivated(){
  window.removeEventListener('scroll', this.handleScroll);
}

五、vue中使用keepAlive缓存页面及记忆上次浏览位置，并刷新页面部分数据

更新部分数据：
参考：https://blog.csdn.net/sinat_41694829/article/details/116018702

使用变量记录第一次进入页面的状态：