nextTickでVUE使用

最近のVM。$ NextTick利用のVUEより、今整理その使用。

推奨読書：http://www.ruanyifeng.com/blog/2014/10/event-loop.html

　このような公式文書：コールバックは、次の実行DOMのレンダリング後まで延期しました。データを変更した後、すぐにそれを使用して、DOMの更新を待ちます。また、グローバルなメソッドがコールバックは、このインスタンスは、それが自動的にアプリケーションにバインドされていることを除いて、同じことをVue.nextTick

　　上記の言葉も理解することができ、我々は、ライフサイクル上で作成されたDOM要素をレンダリングした後、何らかの方法で貼り付ける必要がありますが、それは、VMが必要です。$ NextTick（）コールバック関数が実行されます

　　それともある第2の使用は、我々は、VMのデータを更新する。$ NextTickこの機能、アップデートを待っている間、DOMを使用しています。

　　実際には、プロジェクトが$ NextTick方法。一般的に、アセンブリのVMで使用されるほとんどを使用することであり、このコールバック関数は、自動的に現在のインスタンスのVUEにバインドされます

　　例えば：　

//公式サイトの場合
Vue.component（ '例' 、{ 
  テンプレート： '<span>のメッセージ{} {} </スパン>' 、
  データ：機能（）{
     リターン{ 
      メッセージ： '非更新'の
    } 
  }、
  メソッド：{ 
    UpdateMessage（）{ 
      この .messageは= '更新'の
      はconsole.log（これ。$ el.textContent）// => '非更新'の
      本。$ nextTick（（）=> { 
        はconsole.log（これ。$ EL。 TextContent）// => '更新'の
      }）
    } 
  } 
}）

非同期/のawaitの構文完了ES7を用いることにより出力値の背面が更新されるので、次のように我々はまた、書き込むことができ、上記の場合に公式

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

例えば、私は私の文章の癖に突出します

<スクリプト> 
    エクスポートデフォルト{ 
        名： 'デモ' 、
        データ（）{ 
           リターン{ 
    
           } 
        }、
        作成された（）{ 
             この.getAjaxData（）
              この $ nextTick（（）=>。{
                   この.getDomEl（）
             }）
        }、
       メソッド：{ 
           getAjaxData（）{ 
                 // 取得した背景データ
           }、
           getDomEl（）{ 
            // 関数を実行するDOM要素を取得する必要があり; 
            // または機能に搭載されたが実行
           } 
       } 
    }

</ SCRIPT>

公式サイトのドキュメント：注意も併せて搭載しているサブコンポーネントのすべてを約束していないマウント。あなたは全体のビューのレンダリングが完了するまで待ちたい場合は、VMを使用することができます。$ NextTickはマウントに交換します

この原則応答の内容の深さを見に

おすすめ