vue中当数据改变时更新DOM

具体场景:

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

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

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

解决方案

使用watch + $nextTick

watch监听数据的变化,$nextTick下次DOM更新循环之后来调用,当数据修改之后立即调用它,然后等待DOM更新

使用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

    });

  });

巴特西

vue中当数据改变时更新DOM

具体场景:

解决方案

最新文章

热门文章