vue里面的动态组件和组件缓存，组件激活状态

JSONP＄

已于 2022-03-09 09:12:07 修改

阅读量463

点赞数

文章标签： vue.js

于 2022-03-09 07:30:36 首次发布

本文链接：https://blog.csdn.net/zhuyuan123456/article/details/123367609

版权

先来看一下使用逻辑

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

看下实际代码

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

小结一下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

组件缓存的知识

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

小结一下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

组件激活状态，新增了两个勾子函数

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

小结一下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

优惠劵

JSONP＄

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue里面的动态组件和组件缓存，组件激活状态

先来看一下使用逻辑
复制链接

扫一扫

vue获取当前激活路由的方法

11-28

一个 route object（路由信息对象）表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。 route object 是 immutable（不可变）的，每次成功的导航后都会产生一个新的对象。 route object 出现在多个地方: 在组件内，即 this.$route 在 $route 观察者回调内 router.match(location) 的返回值（在main.js可以获取当前激活路由信息）注意： this.$route的path和router.match(location)的path是不

vue的动态缓存组件

xjx0121的博客

09-22

375

【代码】vue的动态缓存组件。

参与评论您还未登录，请先登录后发表或查看评论

vue之组件的激活activated与失活deactivated

我心坚持

02-23

2930

、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、组件的激活activated与失活deactivated 只有与keepalive一起使用才有效。当跳入页面就会激活，当跳出页面就会失活。 student组件：显示页面 school组件当从school页面跳转到student页面。再从student跳出到school页面尤其是当stu组件中使用beforeDestroy清除定时器时，由于stu组件已经缓存，不会被销毁，所以一直在后台执行定时器。 ...

Vue动态组件和组件缓存

zep

03-01

1984

一、切换组件案例比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示；这个案例我们可以通过两种不同的实现思路来实现：方式一：通过v-if来判断，显示不同的组件；方式二：动态组件的方式；动态组件是使用 component 组件，通过一个特殊的attribute is 来实现：这个currentTab的值需要是什么内容呢？可以是通过component函数注册的组件；在一个组件对象的components对象中注册的组件；二、动态组件的传值如果是

VUE 导航激活状态

weixin_48727085的博客

06-29

747

激活状态（选中样式）默认情况下，vue-router会用当前路径匹配导航路径：（当前路径：）（导航路径：）如果当前路径是以导航路径开头，则算作匹配，会为导航的a元素添加类名router-link-active 如果当前路径完全等于导航路径，则算作精确匹配，会为导航的a元素添加类名router-link-exact-active 明白原理后，对选中样式问题进行处理样式问题可以为组件RouterLink添加bool属性exact，将匹配规则改为：必须要精确匹配才能添加匹配类

vue keep-alive 动态删除组件缓存的例子

10-16

今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue动态组件和异步组件原理详解

10-17

主要给大家介绍了关于Vue动态组件和异步组件原理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

图片动态绘制组件 vue2.x

07-14

安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码

Vue form表单动态添加组件实战案例

10-16

主要介绍了Vue form表单动态添加组件实战案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue里面父组件修改子组件样式的方法

08-28

下面小编就为大家分享一篇vue里面父组件修改子组件样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue——动态组件、缓存组件keep-alive、异步组件

qq_52301431的博客

09-08

1303

有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件。在单页应用中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验。动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。==>使用场景：上面的大分类，点了之后，去选择下面小分类，进行网络请求。

vue 动态组件创建缓存 keep-alive 激活 activated deactivated

259的博客

12-22

471

vue 动态组件创建缓存激活 keep-alive activated deactivated

Vue3组件事件及属性绑定的小插曲

XiaoPan

08-11

672

组件绑定的事件及属性默认会让子组件里的最外层标签继承事件及属性（不包括template） // Demo.vue <div> // 这里 <Button> </Button> </div> // Button.vue <template> <div> <button> </button> </div> </template> ...

vue05

weixin_47648494的博客

09-12

474

vue组件进阶，插槽，自定义指令

Vue3选项式和组合式生命周期说明

weixin_44072254的博客

05-16

508

setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。

vue中的事件

最新发布

weixin_43390711的博客

05-16

166

需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()

vue3.0+antdv的admin管理系统vue-admin-beautiful推荐

独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)

05-15

1160

几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。

Vue.js的发展史（一）

2301_79683791的博客

05-15

766

Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。

基于Vue和uni-app的增强型多选框Checkbox组件开发

chenchuang0128的博客

05-16

360

该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。

vue组件激活的生命周期

09-02

在Vue中，组件的激活生命周期包括两个钩子函数：activated和deactivated。activated钩子函数会在组件被激活时调用，而deactivated钩子函数会在组件被停用时调用。当组件从一个被缓存的路由切换到另一个路由时，组件不会被销毁，而是会触发activated钩子函数，表示组件被激活。在这个钩子函数中，我们可以执行需要在组件激活时执行的逻辑操作。而当组件从当前路由切换到其他路由时，会触发deactivated钩子函数，表示组件被停用。在这个钩子函数中，我们可以执行需要在组件停用时执行的逻辑操作。通过使用activated和deactivated钩子函数，我们可以更好地控制组件在激活和停用状态下的行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序](https://blog.csdn.net/muzidigbig/article/details/112696398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【Vue学习】Vue组件的生命周期](https://blog.csdn.net/zx1041561837/article/details/129202119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue中keep-alive内置组件缓存的实例代码](https://download.csdn.net/download/weixin_38721119/14801633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交