“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

scenario

Today, the product came to me and told me to go to page B after I modified the data on page A. Then return to page A. I hope page A retains the data I have modified. It's not like the data is going back to what it was. I thought to myself, holy shit, overtime again? Look at the little particles down hereCopy the code

Problems with data being reset

<template> <div> <el-button @click="gotosHander"> </el-button> <el-button @click="changeHander"> change data </el-button> <ul  class="box"> <li class="demoli" v-for="(item,index) in list" :key="index"> {{ item.name }}==> {{item.age }} </li> </ul> < / div > < / template > < script > export default {data () {return {list: [{name: 'zhang' age: 23}, {name: "bill", the age: 33},]}}, Methods :{gotosHander(){this.$router. Push ("/details")}, changeHander(){this.list=[{name:' hosea ',age:33}, ] } } } </script>Copy the code

The problems we found

After the page changes the data, we go to the details page. Return to the previous page. The data has been reset. But we don't want to reset the data. Want to let him keep the appearance after we change, how to do ？？？？？Copy the code

Use keep-alive to resolve data reset

<keep-alive>
    <router-view></router-view>
</keep-alive>
Copy the code

Perfect product requirements, ready to run, but geese are not like this

Use a timer on the page

<template> <div> <el-button @click="gotosHander"> </el-button> </div> </template> <script> export default {data(){ return{ timer:null } }, methods:{ gotosHander(){ this.$router.push("/details") }, }, mounted(){ this.timer=setInterval(()=>{ console.log("@@@@@@@@@@@@@@@@@@@") },100) }, beforeDestroy(){ clearInterval(this.timer) } } </script>Copy the code

Problems with keep-alive

If we write a timer in the page, the timer will not be cleared in beforeDestroy. That is: with keep-alive, beforeDestroy in the page is not executedCopy the code

How do I get beforeDestroy on a page to be executed

We can use the lifecycle activated and deactivated activated to trigger this function when the page or component is activated. Activation can be understood as being displayed on the page. Deactivated is triggered when the page is not hidden. When entering the page from the details page, use the activated function. The deactivated function is triggered when we leave the page because it is hiddenCopy the code

Enter the page from the Details page

<template> <div> <el-button @click="gotosHander"> </el-button> </div> </template> <script> export default {data(){ return{ timer:null } }, methods:{ gotosHander(){ this.$router.push("/details") }, }, mounted(){ this.timer=setInterval(()=>{ console.log("@@@@@@@@@@@@@@@@@@@") },100) }, Activated (){console.log(" trigger this function when the page is activated ")}, Deactivated (){clearInterval(this.timer) console.log(" trigger this function when the page is cancelled/switched ")},} </script>Copy the code

The aftereffects of Keep-alive

BeforeDestroy and destroyed life cycle functions in all pages are not executed by default after keep-alive is used. There's a way to do it, but we use include. Include only caches values that match itCopy the code

Include the use of

<keep-alive include="yourPageName"> <router-view></router-view> </keep-alive> This code will only cache the name yourPageNamede If you need to cache multiple pages or components. You can write it as an array <keep-alive :include="['yourPageName','xingqing']"> <router-view></router-view> </keep-alive> <template> <div> < el-button@click ="backHander"> </ el-button@click ="backHander"> </ el-button@click ="backHander"> </ el-button@click ="backHander"> Name :'xingqing',} </script> </script>Copy the code