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/(有免费的教学视频、博客文章与在线工具)

    生于忧患,死于安乐

  • 相关阅读:
    cocos2d-x lua 学习笔记(1) -- 环境搭建
    Cocos2d-x 3.x 如何编译成安卓程序
    Cocos2d-x 3.4 初体验——安装教程
    cocos2d-x 之 CCProgressTimer
    android sdk离线安装
    在cocos2d-x-3.0 android 平台编译时提示CocosGUI.h: No such file or directory
    cocos2d_x iconv转码
    cocos2d-x发生undefined reference to `XX'异常 一劳永逸解决办法
    libjpeg.a exists or that its path is correct
    UE4插件
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/11828776.html
Copyright © 2011-2022 走看看