Vue学习高级特性(三)---动态组件、异步加载组件、缓存组件、如何抽离公共逻辑

本章学习动态组件、异步加载组件、缓存组件、如何抽离公共逻辑这4部分内容。

一、动态加载组件

来直接上代码:

<div id="app">
    <!-- 动态组件绑定原理
        <child-one v-if="type==='child-one'"></child-one>
        <child-two v-if="type==='child-two'"></child-two>
    -->
    {{type}}
    <!--根据 is 属性绑定data数据中的数据名，动态的切换组件，然后自动加载不同的组件 -->
    <!-- Vue内置组件 -->
    <component :is="type"></component>
    <button @click = "handleChange">change</button><br/>
</div>

// 动态组件
// 子组件1
Vue.component('child-one',{
    template:'<div>child-one</div>'
})
// 子组件2
Vue.component('child-two',{
    template:'<div>child-two</div>'
})
var vm = new Vue({
    el:'#app',
    data () {
        return {
            type: 'child-two'
        }
    },
    methods:{
        handleChange:function(){
            this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
        }
    }
});

通过component的:is去动态的切换组件。

二、异步加载组件

当使用大的组件的时候，我们可以按需加载组件。

• import()
• 按需加载，异步加载大的组件 

我们可以用这种方式去加载组件，而不是在头部用import去导入，这样做可以在我们加载页面时候采取记载这个组件。

三、缓存组件

这里主要讲 keep-alive

keep-alive的好处：1.可以缓存组件。2.频繁切换的时候，不需要重复渲染。

分别由三个文件：

keepAliveStateA，keepAliveStateB，keepAliveStateC，内容几乎都是一样的，如下：

<template>
    <p>state A</p>// keepAliveStateB 改为B，keepAliveStateC 改为C，下面也一样
</template>

<script>
export default {
    mounted() {
        // eslint-disable-next-line
        console.log('A mounted')
    },
    destroyed() {
        // eslint-disable-next-line
        console.log('A destroyed')
    }
}
</script>

KeepAlive.vue

<template>
    <div>
        <button @click="changeState('A')">A</button>
        <button @click="changeState('B')">B</button>
        <button @click="changeState('C')">C</button>

        <keep-alive> <!-- tab 切换 -->
            <KeepAliveStageA v-if="state === 'A'"/> <!-- v-show -->
            <KeepAliveStageB v-if="state === 'B'"/>
            <KeepAliveStageC v-if="state === 'C'"/>
        </keep-alive>
    </div>
</template>

<script>
import KeepAliveStageA from './KeepAliveStateA'
import KeepAliveStageB from './KeepAliveStateB'
import KeepAliveStageC from './KeepAliveStateC'

export default {
    components: {
        KeepAliveStageA,
        KeepAliveStageB,
        KeepAliveStageC
    },
    data() {
        return {
            state: 'A'
        }
    },
    methods: {
        changeState(state) {
            this.state = state
        }
    }
}
</script>

在没有加入keep-alive之前：每次切换都要挂载和销毁，不会做到缓存。

 

加入：keep-alive之后：A，B，C都会被缓存起来，不会被重新渲染，有助于性能优化。

四、如何抽离公共逻辑

这部分主要讲mixin

• 多个组件有相同的逻辑，抽离出来。
• mixin并不是完美的解决方案，会有一些问题
• Vue 3提出的Composition API旨在解决这些问题。

先在mixin.js里卖弄写好抽离的组件,如下：

然后mixin结构和MixinDemo.vue结构式一样的，通过mixins: [myMixin]方式混合进来。

这样子多个组件有共同的逻辑可以抽离出来，然后让组件复用就好了。

缺点：

1.遍历来源不明确，不利于阅读。

2.多mixin可能会造成命名冲突。

3.mixin和组件可能出现多对多的关系，复杂度较高，做好只用1个吧。