【vue】keep-alive 用法

最新推荐文章于 2022-04-14 14:32:52 发布
最新推荐文章于 2022-04-14 14:32:52 发布
阅读量2k 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42971942/article/details/88345351
版权

作用：保留组件状态或避免重新渲染

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

 

目的：当在组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

 

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

Sparks67
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Windows下MinGW生成pdb文件
09-11
Windows下MinGW生成pdb文件的工具。便于WinDbg分析崩溃时候的dmp文件。
用cv2pdb.exe 来把mingw 编译出来的dll 变为release dll 和pdb文件。
02-18
用ubuntu mingw wine 交叉编译出windows dll,如果希望在windows 环境下调试代码，设断点等操作。就需要到一个叫做cv2pdb的工具。如果你交叉编译生成的目录有很多子目录和dll,那么你就需要写一个脚本递归的使用cv2pdb.exe 来生成这些 exe 或者dll 的pdb,并把生成的pdb都移动到一个目录上。这样就可以很好的把剩下的exe 或者dll 发布为商用。本脚本是只用于生成pdb信息的。
parcel打包报错Error opening directory
霜叶的博客
11-03 521
win10系统parcel打包的时候报错Error opening directory，找到最后发现手残路径里面有中文导致的，把文件路径里的中文都去掉就好了
Parcel服务报错:regeneratorRuntime is not defined
天问博客-专注于大前端技术
04-14 511
在使用 Parcel 前端打包工具来启动本地服务时，console 控制台报错：Uncaught ReferenceError: regeneratorRuntime is not defined，查阅资料得知：regeneratorRuntime 是打包工具生成的一个全局辅助函数，由 babel 生成，用于兼容 async/await 的语法，所以需要配置相应的 babel 插件。
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 请求数据的方法示例 Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些...
vue中keep-alive的用法及问题描述
12-29
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
vue的keep-alive用法技巧
10-16
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。
基于vue中keep-alive缓存问题的解决方法
01-19
这时候可以使用vue的$destroy()方法 这是vue的一个生命周期，完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。 不用$destroy方法的时候可以用watch监听路有变化来实现效果 created() { ...
parcel 报错问题
FE-阿阳的博客
02-07 1620
parcel 报错问题 问题描述 学习 parcel（号称0配置的打包工具）的时候报错： Unhandled promise rejection (rejection id: 1): SyntaxError: ‘super’ keyword unexpected here 解决方案 parcel 说明上是支持 node 6+，但是还是报错。node 6+ 不支持 async 函
parcel邮包错误
远方的远方
08-04 539
parcel邮包错误 Caused by: java.lang.RuntimeException: Parcel android.os.Parcel@4051d600: Unmarshalling unknown type code 70 at offset 424 答案 实现了Parcelable的类，往往需要重写如下2个方法  public void writeToParce
parcel 入门
weixin_33697898的博客
01-10 114
https://www.gitbook.com/book/dragon8github/fuck-parcel/details
在parcel项目中使用ES7的async语法报错解决方法
花神的博客
02-07 1664
在parcel构建项目后，如果使用ES7的async语法时，在低版本chrome中一直报错，原因是官方建议的使用babel-preset-env模块并没有将所有的语法进行编译，推荐使用transform-runtime插件，在项目中用到哪些语法编译哪些语法，具体使用方法就是 1. npm i --save-dev babel-plugin-transform-runtime 2. 在.babe
cloudera manager报错解决方案
02-08 1万+
问题1 错误提示： cloudera-scm-agent 已死，但 pid 文件仍存 解决办法： [root@node1 ~]# cd /var/run/ [root@node1 run]# rm -rf cloudera-scm-agent.pid 问题2 错误提示： error: No socket could be created on (‘node...
git stash相关使用
qq69696698的专栏
07-30 1万+
最近在使用Git管理项目工程的时候，遇到了很多问题，也学习到了很多关于Git常见使用的技巧，下面就其中关于Git Stash的用法和大家分享下。 首先，简单介绍下Git Stash命令的用法，详细的用法在man文档中有相关介绍，下面我来说明常见的使用。 git stash: 备份当前的工作区的内容，从最近的一次提交中读取相关内容，让工作区保证和上次提交的内容一致。同时，将当前的工作区内
git stash后执行git stash pop但是没有恢复现场
热门推荐
Yang'blog
03-23 1万+
如题目所示，git stash 保存‘现场’后，git stash pop操作没有恢复‘现场’（第一次执行git stash pop后是可以恢复‘现场’的，但是，切换分支后再执行git stash pop 没有恢复）解决：git stash list //显示保存的现场 git stash apply {现场号}如：git stash list你会看到=>stash@{0} ....然后：git s
关于parcel的介绍
xuchuyan的专栏
03-23 5064
Bundle继承自BaseBundle，实现了Cloneable，Parcelable两个接口。
vue keep-alive源码
最新发布
05-01
Vue 的 keep-alive 组件是用来缓存具有相同组件名称的组件的，例如在一个 Tab 页中不同的 Tab 相互切换时，当前 Tab 中的组件及其状态可以被 keep-alive 缓存，以避免在该 Tab 内重复加载组件和数据。 源码中实现了两个生命周期方法 activate() 和 deactivate() 来控制缓存中的组件的挂载和卸载。缓存中的组件通过 mount() 方法来挂载，并在 activated 钩子函数中调用 vnode 的 activated 钩子函数和组件的 activated 钩子函数。 当组件被激活（activated）时，keep-alive 会调用 activate() 方法，该方法会检查被缓存组件的缓存状态，并通过缓存对象的 updated 标志来决定组件是否需要重新挂载。如果需要重新挂载，则通过缓存对象的 vnode 函数重新渲染组件，并调用新组件的 mounted 和 activated 钩子函数。 当组件被停用（deactivated）时，keep-alive 会调用 deactivate() 方法，该方法会调用被缓存组件的 deactivated 钩子函数，并通过 VNode 的 tag 属性判断组件是否需要被销毁。如果不需要被销毁，则缓存对象会记录其销毁状态并保留其状态，下次使用时可以快速还原组件。如果需要被销毁，则通过调用缓存对象的 destroy() 方法来销毁组件并释放资源。 总之，Vue keep-alive 组件通过缓存组件的方式来提高应用程序的性能和用户体验，实现了快速切换和缓存组件的功能。它的核心在于更新缓存中的组件，并且在组件被激活和停用时触发生命周期函数来维护组件的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值