vue2.X基礎知識7の$nexttick

    
      
      div  

        var app = new Vue({

            //    
            el: "#app",
            data: {
            	showDiv: false
            },
            
            //      
            methods: {
            	getText: function() {
            		this.showText = true;
			var text = document.getElementById('div').innerHTML;            		
            		console.log(text);
            	}
            }
        });

上のコードが実行されると、cannot read property'innerHTML'of nullというエラーが投げ出されます.ここでは、非同期更新キューという重要な概念について説明します.
Vueは、データの変化を観察したときにDOMを直接更新するのではなく、キューを開き、同じイベントサイクルで発生したすべてのデータの変化をバッファリングする.バッファリング時に重複データが除去され、不要な計算やDOM操作が回避されます.次に、次のイベントループtickで、Vueはキューをリフレッシュし、実際の作業を実行します.
実際、thisを実行しています.showDiv = true;の場合もdivは作成されず、次のVueイベントがループするまで作成されません.$nextTickは、DOM更新がいつ完了するかを知るために使用されるので、上記のサンプルコードは以下のように変更する必要があります.

        
      
          div  
    
    
        var app = new Vue({

            //    
            el: "#app",
            data: {
            	showDiv: false
            },
            
            //      
            methods: {
            	getText: function() {
            		this.showDiv = true;
			//   dom         		
            		this.$nextTick(function() {
            			var text = document.getElementById('div').innerHTML;
            			console.log(text);
            		});
            	}
            }
        });   
    

理論上、私たちは自発的にDOMを操作する必要はありません.Vueの核心思想はデータ駆動DOMですが、多くの業務では、swiperなどのサードパーティのライブラリを使用することは避けられません.これらのチャンスは、元のjsのライブラリには作成と更新と破棄の完全な宣言サイクルがあり、Vueと組み合わせて使用する場合は、$nexttickを利用する必要があります.
本『Vue.js実戦』より抜粋