Vue异步请求数据和nextTick

vue异步获取数据解析

最近在用vue重构有赞商城，在异步获取数据的时候有些困惑，所以总结分享给大家，也希望大家能够一起进步。

场景显示： 我们现在需要做一个轮播组件，我们需要接收父组件传递过来的图片数组(lists)，所以父组件需要请求后端接口，从而获取数组列表。

1. 数据变化

数据流程.png

数据的到来分几步阶段 list: null

1. 通过接口异步请求数据 loading状态
2. 获取回来的数据：
   • 有数据 渲染 list&&list.length > 0
   • 无数据 空状态的提示 list&&list.length = 0

父组件初始化要获取的lists数组

// 父组件
data(){
  return {
    lists : null
  }
}，
created() {
  this.getBanner()
}
methods: {
  getBanner() {
     // 获取数据
    axios.get(url.banner).then((res) => {
      this.lists = res.data.lists || [];   
    }) 
  }
}

2. 子组件接收数据的过程

子组件接收父组件的数据

1. 当异步请求还没有得到数据的时候，得到lists = null
2. 当异步请求得到数据后，通过props,才能够得到真正的数据 。

这里就有一个问题了

1. 父组件刚开始传递的数据是null给子组件，但是子组件期望得到的是一个数组

父组件传递null.png

解决方案： 当list=null的时候不渲染子组件，当数据到来的时候再进行渲染子组件

// 数据到来的时候渲染子组件 
<swiper :lists= bannerLists name="swiper-banner" v-if="bannerLists"></swiper>
// 数组没有到来的时候loading
<div v-else>loading</div>

子组件的代码：

props: {
    lists: {
      type: Array,
      required: true
    },
    // lists: {},
    name: {}
  },
  // swiper必须要依赖dom
  mounted() {
    this.init();
  },
  methods: {
    init() {
      new Swiper('.swiper-container',{
        loop: true,
        pagination: '.swiper-pagination',
        autoplay: 2000
     })
    }
  },

解决方案： 如果我们不通过v-if来判定子组件是否渲染，而是通过子组件的生命周期函数进行处理

  props: {
    //lists: {
      //type: Array,
      //required: true
    //},
    lists: {},  //不能限定type，接收刚开始的null,和之后的数组lists
    name: {}
  },
  // swiper必须要依赖dom
  methods: {
    init() {
      new Swiper('.swiper-container',{
        loop: true,
        pagination: '.swiper-pagination',
        autoplay: 2000
     })
    }
  },
  watch: {
    //监听lists的变化（从null => 数组）
    lists(val,oldVal) {
      this.nextTick(() => {
        this.init()  //当数据到来的时候， DOM 更新循环结束之后，立即执行函数
      })
    }
  }  

解析： 这里为什么需要使用this.nextTick()呢？当我们监听到lists发生变化的时候，数据虽然到来了，但是通过数据渲染到的对应dom还没有执行，我们还不能获取到对应的dom，只能通过异步的方式处理（this.nextTick()）

<template>
  <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swp-page swiper-slide" v-for="list in lists">
          <a class="js-no-follow" :href="list.clickUrl">
            ![](list.image)
          </a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
  </div>
</template>
<script>
  watch: {
    lists(val,oldval){
      console.log(document.querySelector('.swiper-container'))  //可以获取
      console.log(`val++++${val}`);
      console.log(document.querySelectorAll('.swiper-slide')) //不能获取
      this.$nextTick(() => {
        if(val){
          this.init();
        }
        console.log(document.querySelectorAll('.swiper-slide')) //可以获取
      })
    }
  }
</script>

要确定dom已经渲染完毕，如果有初始数据，在mounted这个阶段dom已经渲染完毕。如果通过watch来监听数据的变化，数据变化后不是马上渲染dom的，是等到下次事件队列来处理的，就需要用到nextTick。

​ 关于nextTick可以查看

• 异步更新队列
• nextTick的基本用法