Vue动态组件、异步组件、组件缓存、组件混合mixin--Vue高级特性

一、Vue的动态引入组件；

　　有的时候不知道引入什么组件，要根据数据的类型来引入不同的组件，这个时候就需要动态组件

动态组件
　　1、用法 :is = 'component-name'
　　2、用途 需要根据数据，动态渲染的场景。即组件类型不明确

父组件

<component :is="nextTiceName" />"

:is 后边是组件名，是一个变量，本例子中变量为 nextTiceName，然后 nextTiceName 返回了组件名，变量可以函数返回或者根据数据处理返回；

数据中

import NextTick from '@/components/nextTice'
    export default {
        components: {
            NextTick
        },
        data() {
            nextTiceName: 'NextTick'
        }
    }

二、异步组件

　　有的时候一个组件特别大，而且不是初始化的时候才需要，特定时候才需要这时候就要异步加载

　　1、import 函数
　　2、按需加载，异步加载大组件

父组件

<FormDemo v-if="formDate" />

在这里 formDate 控制这个组件是否显示，例如特定点击才显示此组件；正常我们是 import 引入函数，但是这里就不通过 import 了，直接在 components 里面注册

export default {
        components: {
            FormDemo: () => import('../components/formDemo')
        }   
}

三、组件缓存 keep-alive

1、频繁切换，不需要重复渲染
2、这是Vue的一个性能优化地方
例如：tab页，tab1 tab2 tab3，tab2显示的话tab1就会destory，tab3显示tab2就会destory，这个时候来回切换影响内存，就要用到keep-alive

四、组件混合 mixin

1、多个组件有相同的逻辑。抽离出来
2、mixin 并不完美，会有一些问题 vue3的composition Api旨在解决这些问题

写法：例如新建一个 mixin.js文件

export default {
    // 多个组件公用的逻辑，数据处理，方法都可以写在这里面
    data() {
        return {
            name: '城市'
        }
    },
    methods: {
        showName() {}
    },
    mounted(){}
}

父组件中引入：

import myMixin from './mixin'

export default {
    mixins: [myMixin],              // 可以添加多个
    data() {
        return {}
    }
}

这样将多个组件复用的逻辑都写在mixin里面，那里要哪里引入就行；和类似写一个公用js文件是一个原理

mixin问题
 1、变量来源不明确，不利于阅读
2、多命名mixin 可能会造成命名冲突

五、动态创建组件的例子

组件写好之后有的时候需要动态创建组件。例如：

编辑文章页面，正文是一个富文本编辑器，富文本编辑器是一个第三方的组件，点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢。

富文本编辑器也就是第三方的组件，需要绑定一个值就跟input一样，但是其他的和平常都是一样的，根据这个特点我们就可以使用Vue的for循环去动态创建例如

<div>
                    <quill-editor 
                        v-model="item.content"
                        style="min-height: 150px;background: #fff;"
                        v-for="item in items"
                        class="editer">
                    </quill-editor>
                </div>
                <div class="addClass_box">
                    <span @click="addTravel()">+&nbsp;新增章节</span>
                </div>

quill-editor 这个是个组件，直接循环出来就行，至于组件所绑定的值，循环出来绑定进去就行。

import { quillEditor } from 'vue-quill-editor'

    export default {
        components: {
            quillEditor
        },
        data () {
            return {
                items: [{
                    component: quillEditor,
                    content: ''
                }]
            }
        },
        methods: {
            addTravel(){
                this.items.push({
                    component: quillEditor,
                    content: ''
                })
            }
        }
    }

点击添加的时候把items这个数组扩张就行了。