javascript - Vue,nextTick问题

问题描述

问 题

vm.$nextTick

看官网没明白，我不知道干嘛用的。

麻烦简单 详细的说一下。

解决方案

上周五用Apicloud写一个简单的app的一个使用场景，代码如下：

created:function(){
      
      var that = this ;
        // ajax请求电影数据
      $.get(apiDouban.hotMovies, function(data) {
        // 截取用于swiper图片滚动
        that.hotMovies = data.subjects.slice(0, 8);
        // 处理图片滚动相关代码
        Vue.nextTick(function(){
           var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              paginationClickable: true,
              spaceBetween: 30,
              centeredSlides: true,
              autoplay: 2500,
              autoplayDisableOnInteraction: false
          });

       });

        $.get(apiDouban.comingSoonMovies, function(data) {
          that.comingSoonMovies = data.subjects;
      });

    });
    }

当时在写这个的时候在没使用Vue.nextTick()时遇到的问题是，swiper只渲染出来了一张图片，后来想到，ajax获取到的数据赋值给vue下的变量需要时间，然后vue使用v-for将这个变量渲染出列表也需要时间，所以在不使用Vue.nextTick()的时候下面这段代码会同时和vue的变量赋值、渲染模板一起执行，就会出现数据不全的状况。所以，应该可以简单的将Vue.nextTick()理解为将异步的代码转换为同步执行，在我写的这个例子中也就是vue赋值完成后再去执行swiper相关要做的事情。更简单的说就是，上面的代码执行完了，Vue.nextTick()里面的代码才能去开始做。

 var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              paginationClickable: true,
              spaceBetween: 30,
              centeredSlides: true,
              autoplay: 2500,
              autoplayDisableOnInteraction: false
          });

这篇关于javascript - Vue,nextTick问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！