keep-alive

Vue 中 keep-alive 组件的生命周期钩子本文来自于我关于 Vue生命周期钩子的系列文章。欢迎阅读、点评与交流~ 1、Vue 中的生命周期钩子 2、Vue 中 keep-alive 组件的生命周期钩子

Vue 高级特性：组件高级用法（动态组件、异步组件、组件缓存 keep-alive）在 Vue 项目开发中，组件是构建界面的核心单元。基础的组件使用（如全局注册、局部注册）能满足简单场景需求，但在中大型项目中，面对“组件动态切换”“大型组件加载优化”“重复渲染性能损耗”等问题时，就需要掌握组件的高级用法。

Vue内置组件KeepAlive——缓存组件实例keep-alive 是一个Vue内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例，而不是销毁它们。

一个很帅的帅哥

Vue keep-alivekeep-alive 的主要作用就是缓存组件的状态，避免在组件切换时销毁和重建组件实例。它的工作原理是在切换组件时，组件实例被缓存，而不是销毁，直到该组件被移除或不再需要时才会销毁。

Vue 项目实战：三种方式实现列表→详情页表单数据保留与恢复背景：在Vue项目中，实现列表页跳转详情页并保留表单数据，返回时恢复表单状态。核心功能：实现以上功能，常见有以下3种方式：

一雨方知深秋

组件缓存keep-alive希望点击面经详情回来之后该1面经详情停留在滚动条停止的位置有些组件是不需要缓存的，例如详情页不需要缓存。解决方法是keep-alive的三个属性

流氓也是种气质 _Cookie

13 vue3之内置组件keep-alive有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

vue 生命周期钩子函数 keep-alive activated deactivated在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。在 2.2.0 及其更高版本中，activated 和 deactivated 将会在树内的所有嵌套组件中触发。activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

Hello_my_new_world

解决wangEditor使用keep-alive缓存后，调用editor.cmd.do()失败前提：wangeditor版本：4.7.11 vue版本：vue2问题：在使用wangeditor富文本编辑器时，需求需要通过点击一个按钮，手动插入定义好的内容，所以使用了 editor.cmd.do('insertHTML', '....') 方法新增内容。但当页面使用keep-alive缓存后，切换到其他页面再切换回编辑器，此时直接调用手动插入内容，Console报错：Uncaught TypeError: Cannot read properties of undefined (reading 'p

keep-alive缓存，三级路由不生效此文章讲诉在vue中使用keep-alive缓存，三级路由缓存失败处理方案。一二级路由缓存无任何问题，三级以上就会失败，因此我们在路由守卫中对matched做出如下优化

前端呆头鹅

缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题怎样在vue中缓存组件？大家都知道，使用keep-alive组件即可，但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。

我是有底线的