zoukankan      html  css  js  c++  java
  • vue的keep-alive

    keep-alive官网的解释和用法比较全面,其实仔细一想,大概就是保持组件的数据状态逻辑展现不变,不需要重新加载就可以再次使用的意思吧

    仅记录一下简单的使用过程:

    1.keep-alive基础使用方法

      index页面:

     1 <template>
     2     <div>
     3       <h2>{{msg}}</h2>
     4       <input placeholder="输入框"></input>
     5       <button @click="stepPage">跳转page页</button>
     6     </div>
     7 </template>
     8 
     9 <script>
    10   export default {
    11     name: "index",
    12     data() {
    13       return {
    14         msg: "首页"
    15       }
    16     },
    17     methods:{
    18       stepPage(){
    19         this.$router.push('/page')
    20       }
    21     }
    22   }
    23 </script>

      page页面:

     1 <template>
     2   <div>
     3     <h2>{{msg}}</h2>
     4     <button @click="stepIndex">跳转index页</button>
     5   </div>
     6 </template>
     7 
     8 <script>
     9   export default {
    10     name: "page",
    11     data(){
    12       return {
    13         msg:"page页"
    14       }
    15     },
    16     methods:{
    17       stepIndex(){
    18         this.$router.push('/index')
    19       }
    20     }
    21   }
    22 </script>

      router.js

    {
        path: '/',
        component: Home,
        name: '测试',
        children: [
          {
            name: 'index',
            path: '/index',
            component: () => import('./pages/test/index'),
            meta: {keepAlive: true}
          },
          {
            name: 'page',
            path: '/page',
            component: () => import('./pages/test/page'),
            meta: {keepAlive: false}
          }
        ]
      }

      home.vue

    1 <div class="layout-content">
    2        <div class="layout-content-main">
    3             <keep-alive>
    4               <router-view v-if="$route.meta.keepAlive"></router-view>
    5             </keep-alive>
    6             <router-view v-if="!$route.meta.keepAlive"></router-view>
    7        </div>
    8 </div>

    当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会分别激活和离开时被执行,进入index页面

     

     

     

     

    2.动态组件与keep-alive使用

    父组件:

     1 <template>
     2     <div>
     3       <button @click="changeComp('One')">组件1</button>
     4       <button @click="changeComp('Two')">组件2</button>
     5       <button @click="changeComp('Three')">组件3</button>
     6 
     7       <!-- 三种配置使用,演示的时候页面单个使用单个演示-->
     8 
     9       <!-- include: 表示会缓存所写入的数组-->
    10       <keep-alive include= 'pageOne,pageTwo'>
    11         <!--动态组件 ,根据is的值来确定渲染哪个组件 -->
    12         <component :is="compId"></component>
    13       </keep-alive>
    14 
    15       <!-- exclude:表示不缓存所写入的组件-->
    16       <keep-alive exclude= 'pageOne,pageTwo'>
    17         <component :is="compId"></component>
    18       </keep-alive>
    19 
    20       <!--max:表示最大缓存组件的个数,其值等于当前组件加历史组件个数的和,如果这个数大于max的则缓存最近使用的max个组件。-->
    21       <keep-alive max= '2'>
    22         <component :is="compId"></component>
    23       </keep-alive>
    24     </div>
    25 </template>
    26 
    27 <script>
    28   import pageOne from './pageOne';
    29   import pageTwo from './pageTwo';
    30   import pageThree from './pageThree';
    31 
    32   export default {
    33     components:{
    34       pageOne,
    35       pageTwo,
    36       pageThree
    37     },
    38     name: "index",
    39     data() {
    40       return {
    41         compId: "pageOne"
    42       }
    43     },
    44     methods:{
    45       changeComp(type){
    46         this.compId = `page${type}`;
    47       }
    48     }
    49   }
    50 </script>

    pageOne组件:

    1 <template>
    2   <div>
    3     <h2>组件1</h2>
    4     <input type="text">
    5   </div>
    6 </template>

    pageTwo组件:

    1 <template>
    2   <div>
    3     <h2>组件2</h2>
    4     <input type="text">
    5   </div>
    6 </template>

    pageThree组件:

    1 <template>
    2   <div>
    3     <h2>组件3</h2>
    4     <input type="text">
    5   </div>
    6 </template>

    单个演示:

     (1) include配置

    切换tab输入数据,展现如下:

    再点击不同的tab查看状态:

     由上可知,组件3没有缓存状态

    (2) exclude

    切换tab输入数据,展现如下:

    再点击不同的tab查看状态:

      由上可知,组件1和组件2没有缓存状态

    (3) max

    切换tab输入数据,展现如下:

    此时再切换组件1和组件2的时候,数据都存在,但是当切换组件3输入数据

    再切换到组件1和组件2时,只有组件2有数据

  • 相关阅读:
    halcon中variation_model_single实例注释.
    vc 实现打印功能
    用VisualC++建立SOAP客户端应用(一)
    第六章
    OpenCV】透视变换 Perspective Transformation(续)
    第六章
    OpenCV仿射变换+投射变换+单应性矩阵
    【最新图文教程】WinCE5.0中文模拟器SDK(VS2008)的配置
    Visual Studio 2008 使用 WinCE 5.0 Emulator
    Win32 CMD批处理命令
  • 原文地址:https://www.cnblogs.com/lhjfly/p/12048714.html
Copyright © 2011-2022 走看看