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

关于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名都重复,配置要求不一样,如何实现复用?