后端的返回的数据用数组接收;

把swiper放到根组件里的mounted，也会出现swiper先初始化，dom再加载的问题：

• swiper初始化在mounted里执行；
• setTimeout定时器是从后端请求回来的数据； 
• 代码执行顺序是：当组件创建完成，就立即执行mounted，然后定义setTimeout定时器也就是（位置“1”），然后初始化swiper（位置“3”），然后是2s之后就开始执行定时器里的回调函数（位置“2”）。
• 所以还是存在dom还没更新好，就初始化了swiper，效果都没地方加，所以就没效果；

把swiper初始化放在datalist接收到值后？

也不能把swiper初始化放在datalist接收到值后，因为这样出现的问题是：只是datalist状态立即更新了，但是dom更新需要经过：虚拟dom创建、diff对比等过程，是异步更新的；这个时候swiper早就初始化完成了，还会出现过早初始化的问题： 

那把初始化swiper放在哪里呢：

让swiper在生命周期updated阶段初始化；此时updated阶段已经可以拿到最新的dom了：

new Vue({
            el: "#box",
            data: {
                datalist: []
            },

            mounted(){
                //ajax请求回来的数据
                setTimeout(() => {
                    //后端的返回的数据用数组接收
                    this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
                        "https://p0.pipi.cn/mmdb/25bfd6ddb53c7e5015d23c5bc24d876c03d41.jpg?imageView2/1/w/160/h/220",
                        "https://p0.pipi.cn/mmdb/25bfd692ddd7e13139313954ee2938728ad6a.jpg?imageView2/1/w/160/h/220"]
                }, 2000)

                
            },
            updated(){
                new Swiper(".swiper", {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项

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

• 这样做的话，updated过程dom就已经更新好了，能拿到最新的dom，所以就可以进行swiper初始化，添加效果了。 

但是这样做的缺点是：

（1）没把dom放在组件里无法复用

（2）如果当前页面状态不止datalist一个，当其他状态更新，update就会重新运行，new Swiper会被多次执行，出现bug