$nextTickの役割を理解し、es 6構文をサポートしないプロジェクトで解決する
966 ワード
まず、応答式の原理である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: '', },
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
})
},
},
})