Vue笔记_内置组件_keep-alive组件

一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用 keep-alive来实现；
keep-alive 是 Vue 的内置组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中；

1.语法

<!-- 对应组件的路由出口使用<keep-alive>包裹->这样写表示该路由出口下的所有组件都缓存 -->
 <keep-alive><router-view/></keep-alive>

<!-- 仅缓存某个组件-->
<keep-alive include='缓存组件的name属性值'><router-view/></keep-alive>

<!--除了某个组件外其余都需要缓存-->
<keep-alive exclude='不需要缓存name属性值'><router-view/></keep-alive> 

2.举例说明

现在有about.vue组件与home.vue组件两个组件，每个组件有个input标签

   // home组件
   <template>
     <div class="home">
       <input type="text" />
       <button @click="test">点击跳转到about页面</button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Home',
     methods: {
       test () {
         this.$router.push('/about')
       }
     }
   }
   </script>

 // about组件
    <template>
      <div class="about">
        <input type="text" />
        <button @click="test">点击跳转到home</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'About',
      methods: {
        test () {
          this.$router.push('/')
        }
      }
    }
    </script>

  // app.vue路由出口
  <template>
      <div id="app">
        <!-- 路由出口 -->
        <router-view />
      </div>
  </template>

上述代码在点击按钮进行切换的时候，组件已经默认被销毁了，input框中的内容不会被保留

 <template>
     <div id="app">
       <keep-alive include='About'> <router-view /> </keep-alive>
     </div>
   </template>

上述代码中about组件被缓存,在切换组件的时候，about组件不会被销毁，内容被保留，但是home组件在切换的时候，内容不会保留

3.使用路由元信息来实现缓存(条件缓存)

    // 路由配置
    const routes=[
      {path:'/about',
      component:About,
       meta:{
         keepAlive:true
       }},
       {path:'/',
      component:Home,
      }
    ]

    
    <template>
      <div id="app">
        <keep-alive> 
            <!-- 路由出口-->
        	<router-view v-if='$route.meta.keepAlive'> <router-view />
         </keep-alive>
    	<router-view v-if='!$route.meta.keepAlive'> <router-view />
      </div>
    </template>

4.生命周期钩子

由于组件被缓存了，因此在组件切换的时候，并不会执行生命周期钩子，此时添加了两个生命周期钩子用作标识(keep-alive专属)

• activated;
  • 进入组件时执行；
• deactivated;
  • 切换组件时执行；

5.作用

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

问题

需求：在页面A跳转到页面B，并在B页面的created中根据url中传递过来的参数做一定的逻辑处理
实现1：

  tabchange: function (item) {
    this.$router.replace(item.target)
  },

实现2

  tabchange: function (item) {
    location.href=this.pagehost + item.target
  },

问题：

• 实现1：跳转没问题，但是逻辑处理没有实现，仔细检查发现跳转过来没有走created生命周期函数(只有第一次正常执行)
• 实现2: 功能正常实现

原因：

• 组件被缓存了，只有第一次进入页面才会走生命周期函数，其余时候不会执行
• location.href不属性vue内部的，在进行页面跳转时不受vue显示，相当于跳转到一个新的页面—> 仍旧会走生命周期函数！