动态组件学习笔记

一只大加号
116 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

vue的一大重要的功能点就是组件化，所以在项目中都会存在多个的页面组件进行使用，当页面用到多个组件的时候，并且多个组件之间需要来回进行切换的时候，经常的切换组件会造成页面性能的消耗或者是短暂的白屏效果，所以记录一下动态组件的学习笔记

1.动态组件

我们先在同一个页面同一个挂载点使用多个组件，通过不同的条件来切换组件

    <template>
        <ul>
        <li @click="currentView = 'Test'">Test</li>
        <li @click="currentView = 'Test1'">Test1</li>
        <li @click="currentView = 'Test2'">Test2</li>
    </ul>
    <component :is="currentView"></component>
    <template>
    <script>
import  Test  from './component/testcomponent/testcomponent.vue'
import  Test1 from './component/testcomponent/testcomponent1.vue'
import  Test2 from './component/testcomponent/testcomponent2.vue'
export default {
  name: 'app',
  components:{
    Test,
    Test1,
    Test2,
  },
  data () { 
    return {
      currentView:'Test2'
     }
 }
 }

通过加载三个组件，在父组件中只显示一个组件，我们通过列表来进行切换 image.png

三个组件分别以简单的一个模板进行测试，并且在created钩子进行输出测试

<template>
    <div>
      组件二
    </div>
</template>
<script>
export default{
    created(){
        console.log('222');
    }
}
</script>

以上方式跑起来，我们可以看到点击列表切换的时候，组件也会跟着切换，并且每个组件都会执行created钩子，所以在切换的时候每个组件都会重新渲染，从而造成性能的一些消耗

2.keep-alive

通过keepalive我们可以将组件进行缓存，在动态切换组件的时候，能做到尽量少消耗一些性能，并且组件的生命钩子会只执行一次，并不会重复执行 老版本的vue中是这么写keepalive的

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

2.0中使用属性作为标签的形式

<keep-alive>

<component v-bind:is="view"></component>

</keep-alive>

通过这样的格式能对多个组件进行优化，每次点击组件的时候，组件进行渲染，只会在第一次触发created钩子函数，相当于加载过的组件都会被缓存下来，当并不是每个组件页面都能用到缓存，如果是需要进行接口请求获取数据，就不适合用keepalive缓存，keepalive主要是用来避免一些不必要的重复渲染

3.activate 钩子函数

如果我们将keepalive用于菜单栏，菜单栏有的页面需要接口数据，有的页面不需要接口数据，那么我们不可能将页面分开来，而是如果出现需要调用接口的组件用到了缓存属性，就可以使用activate函数进行判断获取数据，

activated : function() {}
avatar
文章
阅读
粉丝