Vue动态组件和异步组件

栏目: 编程语言 · 发布时间: 5年前

内容简介:如果我们打算在一个地方根据不同的状态引用不同的组件的话,比如tab页,那么Vue给我们提供动态组件。运行结果如下图:

动态组件

如果我们打算在一个地方根据不同的状态引用不同的组件的话,比如tab页,那么Vue给我们提供动态组件。

基本使用

Parent.vue

<template>
<div>
    <el-button-group>
        <el-button v-for='(btn, index) in btnGroup' 
                   :key="index" :class="{active:btn.disabled}"  
                   @click='change(index)'>{{btn.name}}
        </el-button>
    </el-button-group>
    <div>
        <component :is='currentCom'></component>
    </div>
</div>
</template>
<script>
import Childs1 from './Childs1'
import Childs2 from './Childs2'
import Childs3 from './Childs3'
import Childs4 from './Childs4'

export default {
    name:'Parent',
    components:{
        Childs1,
        Childs2,
        Childs3,
        Childs4
    },
   data() {
    return {
        btnGroup: [
            {name: 'Childs1', disabled: true},
            {name: 'Childs2', disabled: false},
            {name: 'Childs3', disabled: false},
            {name: 'Childs4', disabled: false},
        ],
        currentCom:'Childs1'
        
    }
  },
  methods:  {
      change(index){

          let pre = Number(this.currentCom[this.currentCom.length -1]);
          this.btnGroup[pre -1].disabled = false;
          this.btnGroup[index].disabled = true;
          this.currentCom = 'Childs' + (index + 1);
          
      }
  }
}
</script>
<style scoped>
.active{
    background-color: red;
}
</style>

运行结果如下图:

Vue动态组件和异步组件

当我们点击不同的按钮时,下面会切换不同的组件。实现动态组件的加载。 is 的值可以是一个已经注册的组件的名字或者一个组件的选对象。当我们点击按钮时,这个按钮的 disabledtrue 然后我们将给这个按钮一个 active 的css类,同时改变 currentCom 的值

keep-alive :动态组件的缓存

如果我们需要频繁的切换页面,每次都是在组件的创建和销毁的状态间切换,这无疑增大了性能的开销。那么我们要怎么优化呢?

Vue 提供了动态组件的 缓存keep-alive 会在切换组件的时候缓存当前组件的状态,等到再次进入这个组件,不需要重新创建组件,只需要从前面的缓存中读取并渲染。

Parent.vue(其余地方代码和上面一样)

<template>
<div>
    <el-button-group class='btn-group'>
        <el-button v-for='(btn, index) in btnGroup' 
                   :key="index" :class="{active:btn.disabled}"  
                   @click='change(index)'>
        {{btn.name}}
        </el-button>
    </el-button-group>
    <div style='padding-top:100px;'>
    <keep-alive>
            <component :is='currentCom'></component>
    </keep-alive>
    </div>
</div>
</template>
<style scoped>
.btn-group{
    position:fixed;
}
.active{
    background-color: red;
}
</style>

Childs1.vue

<template>
    <div>
        {{title}}
        <button @click='change'>点我+1</button>
   </div>
</template>
<script>
export default {    
    name:'Childs1', 
    data(){
        return{
            title: 1
        }
    },
    methods:{
        change(){
            this.title += 1;
        }
    },
     mounted(){
        console.log('child1 mounted');
        
    }
}
</script>

Childs2.vue

<template>
    <div>
        Childs2
    </div>
</template>
<script>
export default {
    name:'Childs2',
    mounted(){
        console.log('child2 mounted');
        
    }
}
</script>

运行结果如下图:

Vue动态组件和异步组件

Vue动态组件和异步组件

'

对比:如果我们将<keep-alive></keep-alive>去掉,运行结果如下图:

Vue动态组件和异步组件

Vue动态组件和异步组件

前一组图片在切换组件的时候, title 从1加到3,然后等下次再切换回来的时候, title 还是停留在3,从控制台可以看出, Childs1.vue 这个组件的 mounted 的钩子函数只有一次。后一组图片, title 一开始加到3,下一次进入这个组件的时候 title 又从1开始,控制台图片也显示这个组件经历个了多次钩子函数,说明组件是销毁重建的。

tips :因为缓存的组件只需要建立一次,所以如果我们要在每次进入组件的钩子函数里面做相应的操作的时候,会出现问题,所以请明确我们使用的场景,避免出现bug

异步组件

异步组件 存在的意义在于加载一个体量很大的页面时,如果我们不设置加载的 优先级 的话,那么可能页面在加载视频等信息的时候会非常占用时间,然后主要信息就会 阻塞 在后面在加载。这对用户来说无疑不是一个很差的体验。但是如果我们设置加载的顺序,那么我们可以优先那些最重要的信息 优先显示 ,优化了整个项目。一般来说我们是将加载组件和 路由vue-router )配合在一起使用,所以这里我就不细讲了,具体学习可以参考 官网 来进行学习。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高效能程序员的修炼

高效能程序员的修炼

[美]Jeff Atwood / 陆其明、张健 / 人民邮电出版社 / 2013-7 / 49

jeff atwood于2004年创办coding horror博客(http://www.codinghorror.com),记录其在软件开发经历中的所思所想、点点滴滴。时至今日,该博客每天都有近10万人次的访问量,读者纷纷参与评论,各种观点与智慧在那里不断激情碰撞。 《高效能程序员的修炼》是coding horror博客中精华文章的集合。全书分为12章,涉及迈入职业门槛、高效能编程、应聘......一起来看看 《高效能程序员的修炼》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具