zoukankan      html  css  js  c++  java
  • vue性能优化之keep-alive

    一、简介

    keep-alive是vue的内置组件
    当我们使用keep-alive包裹动态组件时,会缓存不活动的组件实例
    简而言之,就是将组件(页面)的相关数据和状态载入缓存,防止在页面切换的时候重复渲染DOM
    更详细的介绍请参考vue的官方API文档

    二、使用方法

    在项目根组件中,如果我们用keep-alive包裹所有页面组件

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

    在进入页面x时,将会触发x的 activated 生命周期钩子函数
    在离开页面x时,将会触发x的 deactivated 生命周期钩子函数
    同时,所有页面的 mounted 生命周期钩子函数都只会被执行一次

    在2.1.0及更高版本中,可以通过include和exclude来选择需要进行缓存的组件
    例如:当前项目路由配置了3个页面,页面组件名称分别为 A、B、C

    // 只希望页面A被缓存
    <template>
      <div id="app">
        <keep-alive include="A">
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
    // 只希望页面C不被缓存
    <template>
      <div id="app">
        <keep-alive exclude="C">
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
  • 相关阅读:
    uTenux-OS-Task再探
    uTenux——LED驱动讲解
    uTenux——HelloWord
    uTenux——重新整理底层驱动库
    template的超级bug
    [LeetCode] Integer to Roman
    [LeetCode] Roman to Integer
    [LeetCode]Flatten Binary Tree to Linked List
    [LeetCode] LRU Cache [Forward]
    [LeetCode] Reorder List
  • 原文地址:https://www.cnblogs.com/baebae996/p/13356077.html
Copyright © 2011-2022 走看看