$nextTickの役割を理解し、es 6構文をサポートしないプロジェクトで解決する


まず、応答式の原理であるvueを深く見ることができる.jsという公式ドキュメントは、読めなければこれらのブログを見てみましょう.
Vue実装応答式は、データが変化した後にDOMが直ちに変化するのではなく、一定のポリシーでDOMの更新を行う.$nextTickは、次回のDOM更新サイクルが終了した後に遅延コールバックを実行し、データを変更した後に$nextTickを使用すると、コールバックで更新されたDOMを取得することができ、APIドキュメントの公式例は以下の通りである.
new Vue({  //...   methods: {    //...     example: function () {      //modify data       this.message = 'changed'      //DOM is not updated yet       this.$nextTick(function () {        //DOM is now updated        //`this` is bound to the current instance         this.doSomethingElse()       })     }   } })
たとえばmsg 1の値を変更すると、コールバックが実行され、変更後の値が取得されます.new Vue({   el: '.app',   data: {     msg1: '',   },
watch: {
//   es6        
   msg1:function(){
        this.$nextTick(function () {
            console.log(this.msg1);
        });
    },
//  es6      ,     es6            。
this.$nextTick(() => {
    this.msg2 = this.$refs.msgDiv.innerHTML
})
    },
},
})