vue中当数据改变时更新DOM

具体场景:

当vue中使用swiper, better-scroll时候,我们需要去new Swiper,new [better-scroll]来获取实例,通常我们页面的数据都是异步获取的,

会导致我们创建Swiper或者better-scroll实例时,数据还没有更新,DOM也没更新,会造成我们不想要的效果.

所以我们需要在 数据更新之后,DOM也更新了,然后再创建我们的Swiper,better-scroll

解决方案

1. 使用watch + $nextTick
   
   watch监听数据的变化,$nextTick下次DOM更新循环之后来调用,当数据修改之后立即调用它,然后等待DOM更新
2. 使用callback(回调函数)
   
   一般获取数据都是在vuex中的action中调用ajax异步获取的,所以我们可以在分发action的时候传给action回调函数.
   
   当action中获取到数据并且提交mutation之后,调用回调函数
   
   action中

   getGoods({commit}, callback){
     // 异步获取数据
     getGoods().then(result => {
       if(result.code === 0){
         commit('[mutation]', {goods: result.data});
         // 当数据更新之后,通知数据更新了
         // 如果传过来callback就调用，否则不调用
         callback && callback();
       }
     });
   },
   

   vue实例中

   // 分发action
   this.$store.dispatch('getGoods', () => {
       this.$nextTick(() => {
         // $nextTick回调里面的this自动绑定到调用$nextTick的实例上
         // 要在数据更新之后,列表显示后,创建想要的对象
         // 例如swiper或者better-scroll
       });
     });