文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue内置组件keep-alive怎么使用

2023-07-04 19:32

关注

这篇文章主要讲解了“vue内置组件keep-alive怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue内置组件keep-alive怎么使用”吧!

一、Keep-alive 是什么

keep-alivevue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

keep-alive可以设置以下props属性:

关于keep-alive的基本用法:

<keep-alive>  <component :is="view"></component></keep-alive>

使用includesexclude

<keep-alive include="a,b">  <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/">  <component :is="view"></component></keep-alive><!-- 数组 (使用 `v-bind`) --><keep-alive :include="['a', 'b']">  <component :is="view"></component></keep-alive>

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activateddeactivated):

二、使用场景

使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:

当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive

首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存),这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存

{  path: 'list',  name: 'itemList', // 列表页  component (resolve) {    require(['@/pages/item/list'], resolve) }, meta: {  keepAlive: true,  title: '列表页' }}

使用<keep-alive>

<div id="app" class='wrapper'>    <keep-alive>        <!-- 需要缓存的视图组件 -->         <router-view v-if="$route.meta.keepAlive"></router-view>     </keep-alive>      <!-- 不需要缓存的视图组件 -->     <router-view v-if="!$route.meta.keepAlive"></router-view></div>

三、原理分析

keep-alivevue中内置的一个组件

源码位置:src/core/components/keep-alive.js

export default {  name: 'keep-alive',  abstract: true,  props: {    include: [String, RegExp, Array],    exclude: [String, RegExp, Array],    max: [String, Number]  },  created () {    this.cache = Object.create(null)    this.keys = []  },  destroyed () {    for (const key in this.cache) {      pruneCacheEntry(this.cache, key, this.keys)    }  },  mounted () {    this.$watch('include', val => {      pruneCache(this, name => matches(val, name))    })    this.$watch('exclude', val => {      pruneCache(this, name => !matches(val, name))    })  },  render() {        const slot = this.$slots.default    const vnode = getFirstComponentChild(slot)        const componentOptions = vnode && vnode.componentOptions    if (componentOptions) {            const name = getComponentName(componentOptions)      const { include, exclude } = this            if (        (include && (!name || !matches(include, name))) ||        // excluded        (exclude && name && matches(exclude, name))      ) {        return vnode      }      const { cache, keys } = this            const key = vnode.key == null        // same constructor may get registered as different local components        // so cid alone is not enough (#3269)        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')        : vnode.key           if (cache[key]) {        vnode.componentInstance = cache[key].componentInstance        // make current key freshest        remove(keys, key)        keys.push(key)      }                else {        cache[key] = vnode        keys.push(key)        // prune oldest entry                if (this.max && keys.length > parseInt(this.max)) {          pruneCacheEntry(cache, keys[0], keys, this._vnode)        }      }      vnode.data.keepAlive = true    }    return vnode || (slot && slot[0])  }}

可以看到该组件没有template,而是用了render,在组件渲染的时候会自动执行render函数

this.cache是一个对象,用来存储需要缓存的组件,它将以如下形式存储:

this.cache = {    'key1':'组件1',    'key2':'组件2',    // ...}

在组件销毁的时候执行pruneCacheEntry函数

function pruneCacheEntry (  cache: VNodeCache,  key: string,  keys: Array<string>,  current?: VNode) {  const cached = cache[key]    if (cached && (!current || cached.tag !== current.tag)) {    cached.componentInstance.$destroy()  }  cache[key] = null  remove(keys, key)}

mounted钩子函数中观测 includeexclude 的变化,如下:

mounted () {    this.$watch('include', val => {        pruneCache(this, name => matches(val, name))    })    this.$watch('exclude', val => {        pruneCache(this, name => !matches(val, name))    })}

如果includeexclude 发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行pruneCache函数,函数如下:

function pruneCache (keepAliveInstance, filter) {  const { cache, keys, _vnode } = keepAliveInstance  for (const key in cache) {    const cachedNode = cache[key]    if (cachedNode) {      const name = getComponentName(cachedNode.componentOptions)      if (name && !filter(name)) {        pruneCacheEntry(cache, key, keys, _vnode)      }    }  }}

在该函数内对this.cache对象进行遍历,取出每一项的name值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用pruneCacheEntry函数将其从this.cache对象剔除即可

关于keep-alive的最强大缓存功能是在render函数中实现

首先获取组件的key值:

const key = vnode.key == null? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : ''): vnode.key

拿到key值后去this.cache对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,如下:

if (cache[key]) {    vnode.componentInstance = cache[key].componentInstance        remove(keys, key)    keys.push(key)}

直接从缓存中拿 vnode 的组件实例,此时重新调整该组件key的顺序,将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况,如下:

else {    cache[key] = vnode    keys.push(key)        if (this.max && keys.length > parseInt(this.max)) {        pruneCacheEntry(cache, keys[0], keys, this._vnode)    }}

表明该组件还没有被缓存过,则以该组件的key为键,组件vnode为值,将其存入this.cache中,并且把key存入this.keys

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max,如果超过了,则把第一个缓存组件删掉

四、思考题:缓存后如何获取数据

解决方案可以有以下两种:

beforeRouteEnter

每次组件渲染的时候,都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){    next(vm=>{        console.log(vm)        // 每次进入路由执行        vm.getData()  // 获取数据    })},

actived

keep-alive缓存的组件被激活的时候,都会执行actived钩子

activated(){   this.getData() // 获取数据},

注意:服务器端渲染期间avtived不被调用

感谢各位的阅读,以上就是“vue内置组件keep-alive怎么使用”的内容了,经过本文的学习后,相信大家对vue内置组件keep-alive怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯