nextTick中ヴュー（）解析

最近では、開発中〜）私はnextTick（中VUEのために使用させ、問題が発生した理解を深め

次のコンポーネントは、ドラッグ成分で参照されています。

<VUE-draggable- サイズ変更可能な
     クラス = "ドラッグ-IMG" 
     ：W = "座標[0] .width" 
     ：H = "座標[0] .height" 
     ：X = "[0]座標.ABS" 
     、Y =」 [0] .ord」座標
     @dragging = "onDragAvator" 
     @resizing = "onResizeAvator" 
     @dragstop = "onDragstopAvator" 
     @onDragStart = "onDragStartAvatorを" 
     ：分 50 -width = "" 
     ：分 -height = "" 50 
     ：ハンドル = "[ 'TL'、 'TR'、 'BR'、 'BL']" 
     ：ロック-aspect比=「真」
     ：親 =「真」>
     <img @ = "" = "setAvatorDafault" SRC = "@ / assets/img/[email protected]" Altキーをクリックしてください>           
</ VUE-ドラッグ、サイズ変更が可能>

水平および垂直座標のドラッグアセンブリは、幅と高さは、データDataのいずれかによって制御されます。

データ（）{
    リターン{ 
      座標：[{ 
        幅 50 、
        高さ： 50 、
        ABS： 10 、
        ORD： 10 
      }]   
    }       
}

ドラッグとサイズ変更、およびこのデータ操作をDOMべき過程で双方向に結合されます。

onResizeAvator：関数（X、Y、幅、高さ）{ 
    this.coordinate [0] .ABS = X 
    this.coordinate [0] .ord = Y 
}、
onDragAvator：関数（X、Y）{ 
    this.coordinate [0] .ABS = X 
    this.coordinate [0] .ord = Y 
}、

エコー編集するときしかし、我々は非同期に調整するために割り当てられたデータを取得して、ページを表示する必要があります。

さて問題は、データがページの非同期データ収集、幅と高さを調整し、コンポーネントをドラッグして割り当てられたとき理由である、変更されていませんか？

方法：{ 
　　getDefaultData（）{ 
      それは聞かせて = この
      axios.get（この。$ store.state.marketinghost
       + '？/分裂/タスク/ GET / bycode onlischoolCode =' + この.onlischoolCode
       + '＆taskCode =' + これ。$ route.query.id）
      .then（RES => {
         場合（res.data.code == "1" ）{
           VARのデータ= res.data.data
           場合（data.components.length）{ 
            that.coordinate = データ。成分
          } 
        } 
      }） 
      。キャッチ（（ERR）=> { 
        Promise.resolve（ERR）; 
      }）
　　} 
} 
（搭載）{ 
　　この.getDefaultData（）
}

変数ドラッグコントロールコンポーネントを追加した後、コンポーネントが強制的に広い別のジョブが時間の値になりエコー、DOMを更新されます

<VUE-draggable- サイズ変更可能な
     クラス= "ドラッグ-IMG" 
     V-IF = "editLoading！" 
     ：W = "[0] .width座標"  ：H = "[0] .height座標"  X = "座標を[0 ] .ABS」、Y = "[0] .ord"座標"@ドラッグ=" onDragAvator =リサイズ@ "をonResizeAvator" @ dragstop = "onDragstopAvator" @ onDragStart = "onDragStartAvator" ：最小幅= "50" ：最小-高さ= "50" ：ハンドル= "[ 'TL'、 'TR'、 'BR'、 'BL']" ：ロックアスペクト比= "真" ：親= "真"> <IMG @「=クリックsetAvatorDafault "SRC ="@ /資産/ IMG / icon_touxiang @「ALT = ""> </ VUE-ドラッグ・サイズ変更が可能な2x.png>

データ（）{ 
   リターン{ 
　　　 editLoading：偽、
      座標：[{ 
        幅50 、
        高さ：50 、 ABS：10 、 ORD：10 }]}}

方法：{ 
　　getDefaultData（）{ 
      ましょうという = この
      that.editLoading = 真
      axios.get（これ。$ store.state.marketinghost
       + '？/分裂/タスク/ GET / bycode onlischoolCode =' + この.onlischoolCode
       +「＆taskCode = '+ この。$ route.query.id）
      .then（RES => {
         場合（res.data.code == "1" ）{
           VARのデータ= res.data.data
           場合（data.components.length）{ 
            こと.coordinate = data.components 
            それ。$ nextTick（（） => { 
              that.editLoading = 偽
            }）
          } 
        } 
      }） 
      。キャッチ（（ERR）=> { 
        Promise.resolve（ERR）; 
      }）
　　} 
}

（）{搭載
　　本。getDefaultData（）
}

より良いnextTickを（）理解するために、次のキューを説明した非同期更新VUEへの公式のゲートウェイです。

https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5 ％88％97

あなたが設定したときに一言で言えば、 vm.someData = 'new value'そのコンポーネントは、すぐに再描画されることはありません。リフレッシュキューは、コンポーネントがイベントループは、データの更新が完了DOMた後Vueの変更を待つために、次のアップデートで「カチカチ」となりますときに、あなたはすぐに変更後のデータを使用することができます Vue.nextTick(callback) ：

Vue.component（ '例えば' 、{ 
  テンプレート： '<スパン> {{メッセージ}} </スパン>' 、
  データ：関数（）{
     リターン{ 
      メッセージ： '未更新' 
    } 
  }、
  メソッド：{ 
    updateMessage：関数（ ）{
       この .message = '已更新' 
      はconsole.log（この。$ el.textContent）// => '未更新' 
      本。$ nextTick（関数（）{ 
        にconsole.log（この。$ el.textContent）/ / => '已更新'
      }）
    } 
  } 
}）

nextTickは（）約束の主題を返すので、それはまた、非同期に書き込むことができます/道を待ちます。

方法：{ 
  UpdateMessage：非同期機能（）{
     この .message = '更新'の
    はconsole.log（この $ el.textContent。）// => '非更新'の 
    待つこの$ nextTick（）。
    はconsole.log（これ。 el.textContent $）// => '更新'の
  } 
}

おすすめ