首页 > 其他分享 >Vue 该如何实现组件缓存?

Vue 该如何实现组件缓存?

时间:2023-11-17 17:03:20浏览次数:31  
标签:缓存 渲染 列表 Vue 切换 组件 详情

在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合理的方式组织起来,那么自然会存在组件之前切换的问题,vue 中有个动态组件的概念,它能够帮助开发者更好的实现组件之间的切换。但是在面对需求频繁的变化,切换组件时,动态组件在切换的过程中,组件的实例都是重新创建的,而我们需要保留组件的状态,为了解决这个问题,需要使用到 vue 中内置组件<keep-alive>

<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

简答的说: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染

标签:缓存,渲染,列表,Vue,切换,组件,详情
From: https://www.cnblogs.com/yuhuo123/p/17839170.html

相关文章

  • Vue-打印组件
    组件代码:<el-buttonv-print="{id:'print-content'}"icon="el-icon-printer">打印</el-button>//插件vue-print-nb示例: ......
  • vue-富文本/自定义上传图片
    1、下载组件npminstallvue-quill-editor–D2、在需要的组件内引入富文本import{quillEditor}from'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'com......
  • 【虹科干货】Oracle与Redis Enterprise协同,作为企业缓存解决方案
    单独使用Oracle作为企业缓存数据库时,会出现哪些问题呢?使用RedisEnterprise与Oracle共同用作企业级缓存或副本数据库,会出现哪些喜人的提升呢?Orcle配合使用RedisEnterprise,为什么能够打造更快、更高效、更具成本效益的现代企业数据库呢?文章速览:Oracle为什么需要RedisEnterpriseRed......
  • Vue3 模板引用 ref 的实现原理
    什么是模板引用ref?有时候可以使用 ref attribute为子组件或HTML元素指定引用ID。<template><inputref="input"/></template><script>import{defineComponent,ref}from"vue";exportdefaultdefineComponent({setup(){......
  • Vue3 的 effect、 watch、watchEffect 的实现原理
    所谓watch,就是观测一个响应式数据或者监测一个副作用函数里面的响应式数据,当数据发生变化的时候通知并执行相应的回调函数。Vue3最新的watch实现是通过最底层的响应式类ReactiveEffect的实例化一个reactiveeffect对象来实现的。它的创建过程跟effectAPI的实现类似,所......
  • Vue插槽(Slot)的实现原理
    实现原理(简单文字)slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽实现原理:当子组件vm......
  • vuex与redux比较
    相同点state共享数据流程一致:定义全局state,触发,修改state原理相似,通过全局注入store。不同点vuex定义了state、getter、mutation、action四个对象;redux定义了state、reducer、action。vuex触发方式有两种commit同步和dispatch异步;redux同步和异步都使用disp......
  • 手写基础vuex
    实现一个插件:声明Store类,挂载$storeStore具体实现:创建响应式的state,保存mutations、actions和getters实现commit根据用户传入type执行对应mutation实现dispatch根据用户传入type执行对应action,同时传递上下文实现getters,按照getters定义对state做派......
  • vue路由通过props传参
    方式一:布尔模式方法一:直接传参路由配置:{path:'/user/:id/:price',name:'User',component:User,props:true}页面A<template><div><router-link:to="{name:'User',params:{id:12320,price:'$10......
  • Vue $nextTick原理
    作用:vue更新DOM是异步更新的,数据变化,DOM的更新不会马上完成,nextTick的回调是在下次DOM更新循环结束之后执行的延迟回调。实现原理:nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用Promise:可以将函数延迟到当前函数调用栈最末端MutationObserver:是H5新加......