关于Vue异步请求数据,使用插件时实例化的时机分析
一、首先,以Swiper为例
一般在vue组件中的data会设一个初始值,然而这时候可能进行了swiper的实例化,但在异步请求数据后数据发生变化,这个时候不能如我们想象的再次实例化。因此会出现swiper功能紊乱的现象。
解决办法:(根本原理是在数据返回后能够再次实例化)
1. 异步数据返回进行首次初始化
- 延时器-此处引入延时器
setTimeout(()=>{},time)的思想,不是作为主要解决手段,而是提供一种思路 - updated更新阶段的钩子函数里面初始化
- 黑魔法
this.$nextTick(cb)-这个方法执行还在updated执行之后,所以说完全没有问题。注意:必须在数据更新之后,紧接着使用这个方法才有效。
this.$axios(url[, data[, config]]).then(res => {
this.data中的数据 = res.data;
// 紧跟在数据更新之后,才能执行回调
this.$nextTick(cb);//cb中可以进行swiper的实例化
});
2. 封装Swiper组件,给swiper添加key值。利用diff算法,当异步数据返回,以这个数据的key必定变化,所以会重新渲染这个组件。
- swiper组件(对swiper的两个参数都是props传递过来的)-目的:1.为了复用与周全;2.当用到多个swiper时class名都重复,配置要求不一样,如何实现复用? 因此,在用到的时候都是通过props传递过来,实现各自的实例化而且互不影响。
- 此处我用的slot,还可以通过props传bannerList到Swiper组件,动态创建每一个".swiper-slide"
<template>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<slot></slot>
</div>
<div class='swiper-pagination'></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import '@/assets/css/swiper.min.css'
export default {
props:['swiperclass','swiperconfig'],
mounted () {
/* eslint-disable */
new Swiper('.'+this.swiperclass?this.swiperclass:'swiper-container', swiperconfig)
// 如果传了新类名则用传的,没传则还是使用'.swiper-container';
// 或者使用id也可以为swiper找到DOM。
// swiperconfig若传了则使用这个配置,没传也会有默认配置
// 因此这两个props不是必须传, 只是考虑到工程的复杂性而做的优化
}
}
</script>
- 使用Swiper组件时候的key值
<Swiper :key="bannerList.length" :swiperclass="swiperclass" :swiperconfig="swiperconfig">
// 若bannerList的默认值是[],则可以绑定key值为长度,长度变化则重新渲染。
// 若bannerList的默认值是null,则可以绑定key值为bannerList,数据变化则重新渲染。
<div v-for="item in bannerList"
:key="item.bannerId"
class="swiper-slide">
<img :src="item.imgUrl" width="100%" height="200px" />
</div>
</Swiper>
既然说到data中数据的初始值的问题,再来扩展一点:
还是以bannerList为例,一般数组里面为多个对象,在v-for之后每个item则是一个对象。如果对象的层级较深,要取item.user.name。在数据没返回的时候,是取不到的,而且还会在控制台报错。
因此解决这个bug: 建议初始值设成null,并且在最外层v-if=“bannerList”
初始值为[],则v-if=“bannerList.length>0”。表示数据请求到后再渲染。
<div v-if="bannerList"
v-for="item in bannerList"
:key="item.bannerId">
<img :src="item.pic.imgUrl" width="100%" height="200px" />
</div>
// 目的是在数据没返回前,初始值为null,这块html不会渲染,自然也没有报错。
二、better-scroll
- 简介: better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})
具体详细参数配置见官方文档
此插件的使用也类似swiper, 涉及到实例化的问题。
这就是想为大家分享的两个插件具体在vue中的使用。以及类似需要实例化而时机不对造成bug的插件一些思想和建议。
希望大家多多指教。
局势不乐观,但我们逆战无敌。武汉加油!中国加油!
本文分析了在Vue中处理异步请求数据时,如何正确实例化Swiper和better-scroll插件。针对数据变化后Swiper功能紊乱的问题,提出了在updated钩子函数中初始化、使用延时器或黑魔法的方法。同时,讨论了如何通过props动态传参以实现组件复用。对于better-scroll,介绍了其作为移动端滚动解决方案的特点,并指出其使用时也可能遇到类似实例化问题。文章提供了问题解决思路和建议。
1万+

被折叠的 条评论
为什么被折叠?



