关于Vue异步请求数据,使用一些插件时实例化的时机分析

本文分析了在Vue中处理异步请求数据时,如何正确实例化Swiper和better-scroll插件。针对数据变化后Swiper功能紊乱的问题,提出了在updated钩子函数中初始化、使用延时器或黑魔法的方法。同时,讨论了如何通过props动态传参以实现组件复用。对于better-scroll,介绍了其作为移动端滚动解决方案的特点,并指出其使用时也可能遇到类似实例化问题。文章提供了问题解决思路和建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于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>

使用这些插件的具体参数详见: swiperaxios

既然说到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的插件一些思想和建议。
希望大家多多指教。
局势不乐观,但我们逆战无敌。武汉加油!中国加油!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值