有关vue 组件切换,动态组件,组件缓存

目录
  • 一.组件的切换方式
    • 方式一: 使用 v-if和v-else
    • 方式二:使用内置组件:<component></component>
    • 方式三 : vue-router
  • 二.组件缓存: keep-alive
    • 1.keep-alive定义
    • 2.keep-alive的生命周期
  • 三.keep-alive使用方法
    • 1.Props
    • 2.搭配<component></component>使用
    • 3.搭配<router-view />路由使用
    • 4.清除缓存组件

背景:

  • 在组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来,达到预期效果
  • 因为页面是多组件组织起来的,这时候自然就存在组件之间的切换问题,Vue中也提出了动态组件的概念,使得我们可以更好的实现组件之间的切换效果 , 但是vue中组件的切换实际是组件本身重新创建和销毁的过程,在某些场景下我们并不希望组件被重新创建重新渲染

实际场景: 用户操作 列表页-->详情页-->列表页 此时需要达到的预期效果是用户从详情页切换回列表页的时候原来的页面保持不变,而不是重新渲染,此时就需要在用户从列表页切换到详情页的时候对原来的列表页进行缓存

本文主要介绍Vue中组件的切换以及缓存解决方法

一.组件的切换方式

方式一: 使用 v-if和v-else

// 变量flag为true时显示comp-a组件 ,相反则显示comp-b组件
<comp-a v-if="flag"></comp-a>

<comp-b v-else></comp-b>

方式二:使用内置组件:<component></component>

// 点击切换登录,注册,退出组件
   <template>
     <div>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'login'">登录</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'register'">注册</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'logOut'">退出</a>

        //  <component></component> 来展示对应名称的组件,相当于一个占位符
        //    :is 属性指定 组件名称

      <component :is="comName"></component>
      </div>
    </template>

方式三 : vue-router

// 路由规则:
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue')
  },

  // 需要展示组件的位置:
   <router-view />

二.组件缓存: keep-alive

根据需求对组件缓存,而不是销毁重建,正如本文开篇举例的实际场景

1.keep-alive定义

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

<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated deactivated 这两个生命周期钩子函数将会被对应执行 。

2.keep-alive的生命周期

activated

keep-alive 组件激活时调用  该钩子函数在服务器端渲染期间不被调用

 deactivated

keep-alive 组件停用时调用 该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated deactivated
使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。

注意: 只有组件被 keep-alive 包裹时,这两个生命周期函数才会被调用,如果作为正常组件使用,是不会被调用的,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子函数依然不会被调用!另外,在服务端渲染时,此钩子函数也不会被调用。

设置了缓存的组件:

  • 第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave
  • 后续进入时:beforeRouterEnter ->activated->deactivated> beforeRouteLeave

三.keep-alive使用方法

1.Props

include - 字符串或数组,正则表达式。只有名称匹配的组件会被缓存-->include的值为组件的name
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件。

2.搭配<component></component>使用

  <template>
     <div>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'login'">登录</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'register'">注册</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'logOut'">退出</a>

     // login组件会被缓存 不设置include会默认缓存所有挂载到<component></component>的组件
     // 缓存多个指定组件include = ['login','register']
      <keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>
      </div>
    </template>

3.搭配<router-view />路由使用

需配置路由meta信息的keepAlive属性
keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlivetrue进行缓存,否侧不进行缓存,这样可以更灵活一些

 {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
    meta:{
        keepAlive : true   // login组件会被缓存
    }
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue'),
      meta:{
        keepAlive : false   //  register组件不会被缓存
    }
  },

<router-view />:

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

    <!-- 不需要缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

4.清除缓存组件

 // beforeRouteLeave()钩子
// 判断是否要到详情页
  beforeRouteLeave(to, from, next) {
      if (to.path === "/goods_detail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
        // this.$destroy()
      }
      next();
    }

到此这篇关于有关vue 组件切换,动态组件,组件缓存的文章就介绍到这了,更多相关vue组件切换,动态组件,组件缓存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 深入了解Vue动态组件和异步组件

    1.动态组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app { font-size: 0 } .dynamic-component-demo-tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1p

  • Vue 动态组件components和v-once指令的实现

    一.实现两个组件间互相展示.互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <ch

  • vue.js 动态组件详解

    :is 动态组件 使用 v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: <div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "f

  • vue3的动态组件是如何工作的

    在这篇文章中,阿宝哥将介绍 Vue 3 中的内置组件 -- component,该组件的作用是渲染一个 "元组件" 为动态组件.如果你对动态组件还不了解的话也没关系,文中阿宝哥会通过具体的示例,来介绍动态组件的应用.由于动态组件内部与组件注册之间有一定的联系,所以为了让大家能够更好地了解动态组件的内部原理,阿宝哥会先介绍组件注册的相关知识. 一.组件注册 1.1 全局注册 在 Vue 3.0 中,通过使用 app 对象的 component 方法,可以很容易地注册或检索全局组件.com

  • vue components 动态组件详解

    目录 总结 总结 数组发生变化时,动态加载相应数据 场景:点击不同组件名称,界面显示相应组件 步骤一:导入所需组件 步骤二:点击 tab 选项卡,将对应组件名添加进数组 步骤三:使用动态组件,:is 属性绑定组件名 <div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div

  • vue使用动态组件实现TAB切换效果

    问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一 使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二 使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案 方式三

  • 有关vue 组件切换,动态组件,组件缓存

    目录 一.组件的切换方式 方式一: 使用 v-if和v-else 方式二:使用内置组件:<component></component> 方式三 : vue-router 二.组件缓存: keep-alive 1.keep-alive定义 2.keep-alive的生命周期 三.keep-alive使用方法 1.Props 2.搭配<component></component>使用 3.搭配<router-view />路由使用 4.清除缓存组件

  • vue 实现拖拽动态生成组件的需求

    产品需求 开完产品需求会议,遇到了一个需求,首先页面分成两栏布局,左侧展示数据组件,支持拖拽排序,点击按钮清除组件.右侧支持将组件的缩略图拖拽至左侧生成一个新的组件. 思路 对于动态生成组件来说每一次都要是生成全新的一个组件,那么就可以把 组件放进函数当中 return.在JSX中调用函数,每次调用函数都会返回一个全新的组件.这对React来说非常简单,但是对于Vue来说,直接将组件返回是不可能的.尽管这个 return 写法不适合Vue,但是我们不可否认,思路是非常正确的,所以我们应该考虑一个

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

    业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存. 实现: 1.先在store的state里面设置一个要缓存数组 2.在进到子页面的时候,更新store的数组,把将要缓存组件的name(注意:是组件的name,并不是路由的name),装进数组 3.当前组件的route-view,外层包裹keep-alive,include用你从仓库里面取出来的数组 4.关闭标签页(也就是后退路由的时候),清空store里的数组 总结:通过动态的设置inc

  • Vue浅析讲解动态组件与缓存组件及异步组件的使用

    目录 1.什么是动态组件 2.如何实现动态组件渲染 3.如何实现缓存组件 4.异步组件 1.什么是动态组件 当我们希望页面中的某个地方,在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件. 2.如何实现动态组件渲染 vue提供了一个内置的组件,专门用来实现动态组件的渲染:通过 is 属性动态指定要渲染的组件 因为要渲染的组件是不确定的,所以要通过data申明一个变量用来接收组件的名称,用 :is 动态绑定这个变量到组件中,通过按钮添加事件改变变量的值来切换相应组件 案例: //父

  • Vue切换Tab动态渲染组件的操作

    使用<component :is="组件名"></component> 结合Element-UI的导航菜单 : UI组件 el-menu-item里的index写对应的组件名 点击事件@select="handleSelect" <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal&quo

  • vue动态子组件的两种实现方式

    文章目录 方式一:局部注册所需组件 使用缓存 方式二:动态注册组件实现 让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <div id="example"> <button @click="change">切换页面</button> <component :is="curre

  • Vue动态组件与内置组件浅析讲解

    目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间

  • 解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

随机推荐