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可以查看

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,269评论 0 29
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,816评论 24 688
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 9,309评论 4 129
  • Vue笔记系列1、Vue.js入门3、Vue.js进阶 API 以下会随用随记一些API,可能会不定期更新。 Vu...
    其心阅读 1,816评论 0 10
  • 美术颜料里也有一片绿意。从忙碌的工作中走出来,抬头看看窗外的被风吹起的树叶,会觉得心情放松了不少。心情好,...
    文萃画材阅读 123评论 0 0