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

    keep-alive:是vue内置的一个组件,可以使被包含的组件保留状态或避免重新渲染。有两个生命周期函数:activated、deachtivated。在vue 2.1.0版本后新增了两个属性:include与exclude。

    生命周期函数(在服务端渲染时,以下两个钩子函数不会被调用)

      activated:在 keep-alive 组件激活是调用。如果每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子函数中获取数据的任务

      deachitivated:在 keep-alive 组件停用时调用。

    属性

      include:

        类型:字符串(include="") 或 表达式(使用 v-bind:include="")

        作用:只有名称匹配的组件才会被缓存

      exclude(优先级 > include):

        类型:字符串(exclude="") 或 表达式(使用 v-bind:exclude="")

        作用:任何名称匹配的组件都不会被缓存

      max:

        类型:Number

        作用:最多可以魂村多少组件实例

    组件缓存实例

    // 新增一个组件:
    export default {
      name: 'test-keep-alive',
      data () {
        return {
            includedComponents: "test-keep-alive"
        }
      }
    }
    
    
    // 实例:
    <keep-alive include="abc">
        <!-- 将缓存组件名 = abc 的组件 -->
        <component></component>
    </keep-alive>
    
    <keep-alive include="a,b">
       <!-- 结合动态组件,将缓存name为a或b的组件 -->
        <component :is="a"></component>
    </keep-alive>
    
    
    <!-- 使用正则表达式,需使用v-bind -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 动态判断 -->
    <keep-alive :include="includedComponents">
      <router-view></router-view>
    </keep-alive>
    
    <keep-alive exclude="test-keep-alive">
      <!-- 将不缓存name为test-keep-alive的组件 -->
      <component></component>
    </keep-alive>

    页面缓存实例(结合 vue-router)

    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    
    
    //  在router的index.js中配置 meta 元信息
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: Hello,
          meta: {
            keepAlive: false // 不需要缓存
          }
        },
        {
          path: '/page1',
          name: 'Page1',
          component: Page1,
          meta: {
            keepAlive: true // 需要被缓存
          }
        }
      ]
    })

     欢迎浏览博主站点:http://www.devloper.top/(有免费的教学视频、博客文章与在线工具)

    生于忧患,死于安乐

  • 相关阅读:
    4QC(四象限变流器)
    SR锁存器
    JVM 专题二:虚拟机(二)Java虚拟机
    JVM 专题一:虚拟机(一)
    Scala 基础(一):各平台安装
    shell专题(十一):企业真实面试题(重点)
    shell专题(十):Shell工具(重点)
    shell专题(九):函数
    shell专题(八):read读取控制台输入
    shell专题(七):流程控制(重点)
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/11828776.html
Copyright © 2011-2022 走看看