keep-alive

作者:神秘网友 发布时间:2021-02-23 17:20:16

keep-alive

keep-alive可以在组件切换时,保存其包裹的组件的状态,使其不被销毁,防止多次渲染。其拥有两个独立的生命周期钩子函数 activated和 deactivated,使用keep-alive包裹的组件在切换时不会被销毁,而是缓存到内存中并执行 deactivated钩子函数,命中缓存渲染后会执行 activated钩子函数。 activated:页面第一次进入的时候,钩子触发的顺序是created-mounted-activated deactivated:页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated props
  • include - 字符串或正则表达,只有匹配的组件会被缓存
  • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
example:
// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}
keep-alive include="a"
  component
    !-- name 为 a 的组件将被缓存! --
  /component
/keep-alive可以保留它的状态或避免重新渲染
keep-alive exclude="a"
  component
    !-- 除了 name 为 a 的组件都将被缓存! --
  /component
/keep-alive可以保留它的状态或避免重新渲染
实际项目中,需要配合vue-router共同使用: 增加router.meta属性
// routes 配置
  export default [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }, {
      path: '/:id',
      name: 'edit',
      component: Edit,
      meta: {
        keepAlive: false // 不需要被缓存
      }
    }
  ]
keep-alive
     router-view v-if="$route.meta.keepAlive"
         !-- 这里是会被缓存的视图组件,比如 Home! --
     /router-view
/keep-alive
    
router-view v-if="!$route.meta.keepAlive"
     !-- 这里是不被缓存的视图组件,比如 Edit! --
/router-view

keep-alive 相关文章

  1. keep-alive的使用

    keep-alive: Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 与transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。 作用: 在组件切换过程中将状态保留在内存中,防止

  2. 02-plugins

    plugin 可以在webpack运行到某个阶段的时候,帮你做一些事情,类似于生命周期的概念。在之前我们使用loader的时候,我们打包后还需要自己手动在打包后的文件夹中创建一个index.html文件,并且这个文件中引入打包后的js,非常麻烦,所以就有了下面这个插件。

  3. 14. Vue3.x中组件的生命周期函数、动态组件 keep-alive、Vue实现Tab切换

    一、Vue3.x中组件的生命周期函数 beforeCreate: 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created: 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法

  4. Java多线程详解(1)

    多线程详解 1、线程简介 ①多任务—用户可以在同一时间内运行多个应用程序,每个应用程序被称作一个任务 ②多线程—多个线程并发执行 ③程序、进程、线程 程序—指令和数据的有序集合,是静态的概念 进程—执行程序的一次执行过程,是动态的概念,系统资源分

  5. 如何隐藏SSH的版本

    本文以在 Ubuntu 18.04 上为例,演示如何隐藏 OpenSSH 的版本信息。 Step 1: 查看 OpenSSH 的版本信息 # whereis sshd sshd: /usr/sbin/sshd /usr/share/man/man8/sshd.8.gz# /usr/sbin/sshd - v unknown option -- v OpenSSH_7.6p1 Ubuntu-4ubuntu0.3, Open

  6. 五、 循环语句

    第一章 循环结构 1.1 循环概述 循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段被重复执行的代码被称为循环体语句,当反复执行这个循环体时,需要在合适的时候把循环判断条件修改为false,从而结束循环,否则循环将一直执行下去,形成死循环

  7. 剑指offer:用栈来建立队列

    一、栈和队列 栈的思想:先进后出,所以在python里用append()和pop()就能实现栈的push压入和pop弹出了。append每次在列表的后面添加一个元素,pop每次弹出列表的最后一个元素,做到了先进后出。 队列的思想:先进先出。 所以要用栈来实现队列的思想如下: 1.

  8. 表格单元格的合并

    我们可以在td/td标签里面设置属性控制行与行之间的合并,也可设置列与列之间单元格的合并。列与列,就写colspan="2";行与行就是:rowspan="2",这都表示合并两个,记得合并后一定要把合并的那个单元格的代码删除!如下所示: 1 !DOCTYPE html 2 html 3 head

  9. vue中 keep-alive以及activated,deactivated生命周期的用法

    vue官网的描述: keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 keep-alive 内被切换,它的 activated 和 deactiv

  10. keep-alive与生命周期函数

    理解keep-alive keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 router-view也是一个组件,如果直接被keep-alive包在里面,所有路径匹配到的视图都会被缓存 keep-alive router-view/router-view/keep-alive keep-alive还有两个

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词