All components in Vue have a declaration cycle. From birth to death, it usually goes through 8 or 6 declaration cycles. The declaration cycle is the hook function.

Reasons for occurrence and usage scenarios

If I have a component that I want to reuse, but I have to switch components over and over again, that component will die and be born over and over again, which is annoying to say, and probably annoying to the developers of Vue (it’s a waste of memory, even if it’s rendering a virtual DOM),

 Vue.use(VueRouter);
        var Login  = {
            template:I am the login page  '.beforeCreate(){
                console.log("LoginbeforeCreate")},created(){
                console.log("Logincreated")},beforeMount(){
                console.log("LoginbeforeMount")},mounted(){
                console.log("Loginmounted")},activated(){
                console.log("Loginactivaed")},deactivated(){
                console.log("Logindeactivaed")},beforeDestroy(){
                console.log("LoginbeforeDestory")},destroyed(){
                console.log("LoginbeforeDestory")}};var Register  = {
            template:'
      

        I am the registration page 
      
'.beforeCreate(){
                console.log("RegisterbeforeCreate")},created(){
                console.log("Registercreated")},beforeMount(){
                console.log("RegisterbeforeMount")},mounted(){
                console.log("Registermounted")},activated(){
                console.log("Registeractivaed")},deactivated(){
                console.log("Registerdeactivaed")},beforeDestroy(){
                console.log("RegisterbeforeDestory")},destroy(){
                console.log("RegisterbeforeDestory")}};var router = new VueRouter({
            routes: [// Note that this is an array with nested objects, each representing a route
		                {
		                    path:'/login'.// Routing address
		                    name:'login'.// Name the route
		                    component:Login , // The corresponding route is the component to be loaded
		                },
		                {
		                    path:'/register'.// Routing address
		                    component:Register  // The corresponding route is the component to be loaded]})},new Vue({
            el:'#app',
            data () {
                return{

                }
            },
            router,
            template:'
      
 
       
 `
        })
Copy the code

The first time the page loadsWhen you switch to the registration page, you first create the instance and then prepare to render the virtual DOM, then destroy the components of the last route, and then finish renderingThe component is always created and destroyed when switching routes, so use keep-alive. The following are partial changes to the above code

/ / like this
<keep-alive><router-view></router-view></keep-alive>
// Switching routes after wrapping does not execute the destruction declaration function
// Both activated and deactivated are executed
// Since the component is not destroyed, the state of the component before the switch is saved
Copy the code

Keep-alive has two attributes, include

<keep-alive include="register"><router-view></router-view></keep-alive>
// name:register component will be cached
// When using include, you must set the name attribute for all vue components managed by the route. Otherwise, all vue components without the name attribute will be cached, making conditional filtering difficult
Copy the code

exclude

<keep-alive exclude="register"><router-view></router-view></keep-alive>
// Components except name:register will not be cached
// I don't have a test to determine
Copy the code