项目中遇到的bug

bug

一：在mounted钩子中轮播图等组件的封装问题

1.在Vue组件的封装中mounted中为什么执行了却拿不到数据

原因：mounted执行太快(一来就执行一遍)导致我们我们的dom后渲染
解决方法：把我们要执行的代码变成watch监听的一个异步代码（this.$nextTick）

2.监听器明明是收到数据后,才执行的JS代码
        那为什么DOM还是在监听器后面执行

原因:我们dom渲染需要时间

背景：在封装轮播图的时候发现轮播图没效果

<script>
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export default {
    props: ["loop"],
    mounted() {

    },
    /* 
        我这个监听器明明是收到数据后,才执行的JS代码
        那为什么DOM还是在监听器后面执行

        原因: DOM渲染需要时间大于JS执行的时间
    */
    watch: {
        loop: {
            handler() {
                // init Swiper:
                // 异步实现
                this.$nextTick(() => {
                    const swiper = new Swiper(this.$refs.myref, {
                        // configure Swiper to use modules
                        modules: [Navigation, Pagination],


                        direction: 'vertical', // 垂直切换选项
                        loop: this.loop, // 循环模式选项

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },

                        // 如果需要滚动条
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        },
                    });
                })
            },
            immediate:true,
        }
    }

}
</script

 

二：keepAlive插槽的小问题

<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们

在插入字符串的时候切记切记切记不能有空格