Vue之动态组件详解

Vue动态组件

文章目录

一.背景

Vue 中提供有一个内置的组件叫做 component 。这个组件就是动态组件。它需要设置 is 属性。is 属性的值就是需要渲染的组件的名字

动态组件在我们实际开发中是很有用的,比如我们要实现选项卡切换的操作,对应的选项卡内容是不同的组件,这时我们就可以考虑使用动态组件.

我们知道,动态渲染组件的方式还很多种,比如使用v-if判断,v-show实现组件样式的显示与隐藏,但是呢,一般我们要考虑到性能的问题

1.v-if动态加载

v-if操作,如果我们有很多组件需要动态的加载,那么每一个组件都要去判断,如果成百上千个,那你的代码里基本上就全是v-if了,其实这还不算什么,

最主要的是v-if操作,一直从创建到销毁,会有dom开销,频繁切换的话,性能肯定很大的问题

额外扩展一句:使用v-if和v-once配合使用,可以达到v-show的性能要求

实际上使用动态组件时,也会有性能开销,毕竟动态组件的原理也是这样,切换过程中,也是组件的创建到销毁操作,不过动态组件可以通过keep-alive来实现状态保持,也就是缓存

2.v-show动态加载

v-show操作,虽然减少了频繁切换的性能开销,但是v-show实际上的原理只是做样式的显示与隐藏,也就是说,在最开始加载的时候会全部加载,如果组件不大,可以这么做,但是如果组件很庞大的话,初始加载,那肯定也是不友好的

那这里,Vue中就给我们提供了一个内置组件:component也就是动态组件,可以解决这些问题

二.动态组件

动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个

在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，根据对应的显示；

1.动态组件实现

html:

		<section class="main">
            <component :is="current"></component>
        </section>
        <nav class='nav'>
            <a  @click="current='index'" href="javascript:">首页</a>
            <a  @click="current='find'" href="javascript:">发现</a>
            <a  @click="current='my'" href="javascript:">我的</a>
        </nav>

js:

Vue.component('index', {
            template: `
                <div>我是首页内容</div>
            `,
            beforeCreate() {
                console.log('beforeCreate index');
            },

            beforeDestroy() {
                console.log("beforeDestroy index");
            }
        });

        Vue.component('find', {
            template: `
                <div>我是发现内容</div>
            `,
            beforeCreate() {
                console.log('beforeCreate find');
            },

            beforeDestroy() {
                console.log("beforeDestroy find");
            }
        });

        Vue.component('my', {
            template: `
                <div>我是我的内容</div>
            `,
            beforeCreate() {
                console.log('beforeCreate my');
            },

            beforeDestroy() {
                console.log("beforeDestroy my");
            }
        });

        const vm = new Vue({
            el: '#app',
            data: {
                current: 'index'
            }
        });

上述代码就实现了一个动态组件加载的代码,其实理解起来很简单,需要动态加载的组件共同维护data中的current数据,然后通过需要切换的按钮给绑定事件,去修改这个current为当前哪一个组件即可.

但是我们会发现一些问题,当我们每次切换的时候,组件的生命周期钩子函数也会相应触发,也就是说动态组件切换时也会有创建销毁的性能开销,vue给我们提供了下面的解决办法:keep-alive

2.keep-alive 状态保持

Vue 中提供了一个 keep-alive 内置组件。可以实现组件的缓存。

当在这些动态组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题.在动态组件上使用keep-alive,来实现组件缓存,

 			<keep-alive>
                <component :is="current"></component>
            </keep-alive>

使用keep-alive 将component动态组件包裹起来

  			Vue.component('index', {
            template: `
                <div>
                    我是首页内容
                    <p>{{name}}</p>
                    <button @click="name='zhangsan'">修改名字</button>
                </div>
            `,
            beforeCreate() {
                console.log('beforeCreate index');
            },

            beforeDestroy() {
                console.log("beforeDestroy index");
            },
            //当组件被keep-alive缓存时,会调用这个钩子函数(激活时)
            activated() {
                console.log("activated  index");
                
            },
            //当组件被keep-alive缓存时,会调用这个钩子函数(失活时)
            deactivated() {
                console.log("deactivated  index");
            },
            data() {
                return {
                    name: 'liuqiao'
                }
            }
        });

        Vue.component('find', {
            template: `
                <div>我是发现内容</div>
            `,
            beforeCreate() {
                console.log('beforeCreate find');
            },

            beforeDestroy() {
                console.log("beforeDestroy find");
            }
        });

        Vue.component('my', {
            template: `
                <div>我是我的内容</div>
            `,
            beforeCreate() {
                console.log('beforeCreate my');
            },

            beforeDestroy() {
                console.log("beforeDestroy my");
            }
        });

        const vm = new Vue({
            el: '#app',
            data: {
                current: 'index'
            }
        });

上述代码中,我要在index组件中修改name属性,然后切换到其他组件,再切换回来时,keep-aliver已经帮我保存了之前的操作状态,这就是keep-alive的作用

2.1 被keep-alive缓存组件特点

切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。
切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的重新创建呢）
会多出两个生命周期的钩子函数
- activated 缓存激活第一次会触发,组件能被看到时
  
  一般跟created钩子函数做一样的事情:请求数据
- deactivated 缓存失活不能被看到
  
  一般跟beforeDestory做一样的事情:清除定时器,移除全局事件监听
可以在 vue devtools 上看见组件的缓存情况

2.2 keep-alive的更多属性设置

2.2.1 include 包含

使用方式

include=“组件1,组件2”
:include=[“组件1,组件2”] 数组形式,include前必须要有冒号
:include=’/^hello/’ 正则匹配,方式以hello开头的

   <keep-alive include="index,find">
         <component :is="current"></component>
   </keep-alive>

只会缓存这两个组件,其它的不被缓存

2.2.2 exclude排除