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
       });
     });