ホームページ > 記事 > ウェブフロントエンド > vue.nexttickとは何ですか
#このチュートリアルの動作環境: Windows10 システム、vue バージョン 2.9、thinkpad t480 コンピューター。 推奨: 「vue.nexttick は、更新された DOM を取得する Vue メソッドです。nextTick メソッドは、次回 dom がデータを更新するとき、つまり、データが更新されて dom にレンダリングされるときまで、コールバック関数を遅延させます。を指定すると、nextTick 関数が自動的に実行されます。
vue チュートリアル 」
Vue.nextTick() とは何ですか?
定義: 次の DOM 更新サイクルの後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。 そこで、更新された DOM を取得するこの Vue メソッドが派生しました。したがって、Vue.nextTick() コールバック関数に配置される実行は、DOM を操作する js コードである必要があります。理解: nextTick() は、次回 DOM がデータを更新するまでコールバック関数を遅延させます。簡単に理解すると、データが更新され、DOM 内でレンダリングされると、関数が自動的に実行されます。<template> <div class="hello"> <div> <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button> </div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { testMsg:"原始值", } }, methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM,输出:原始值 } } } </script>Use this.$nextTick()
methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs.aa.innerText); //输出:修改后的值 }); } }注意: Vue は、データが変更されると、DOM はすぐに変更されますが、DOM は特定の戦略に従って更新されます。 $nextTick は、次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。データを変更した後に $nextTick を使用すると、コールバックで更新された DOM を取得できます。 Vue.nextTick を使用しますか? ()?
1. Vue ライフサイクルの created() フック関数によって実行される DOM 操作は、Vue.nextTick() のコールバック関数に配置する必要があります。 created() フック関数が実行されるとき、実際にはレンダリングは実行されず、このときの DOM 操作は無駄になるため、DOM 操作用の JS コードを Vue.nextTick() のコールバック関数に入れる必要があります。これに対応するのがマウントされたフック関数です。このフック関数が実行される時点ですべての DOM のマウントが完了しているためです。 created(){
let that=this;
that.$nextTick(function(){ //不使用this.$nextTick()方法会报错
that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素
});
},
2. プロジェクト内のDOM要素のデータを変更した後、新しいDOMに基づいて何かをしたい場合、新しいDOMに対する一連のjs操作をコールバック関数に入れる必要があります。 Vue.nextTick() ;一般的な理解は次のとおりです: データを変更した後、js を使用して新しいビューをすぐに操作したい場合は、これを使用する必要があります。
<template> <div class="hello"> <h3 id="h">{{testMsg}}</h3> </div> </template> <script> export default { name: 'HelloWorld', data () { return { testMsg:"原始值", } }, methods:{ changeTxt:function(){ let that=this; that.testMsg="修改后的文本值"; //vue数据改变,改变dom结构 let domTxt=document.getElementById('h').innerText; //后续js对dom的操作 console.log(domTxt); //输出可以看到vue数据修改后DOM并没有立即更新,后续的dom都不是最新的 if(domTxt==="原始值"){ console.log("文本data被修改后dom内容没立即更新"); }else { console.log("文本data被修改后dom内容被马上更新了"); } }, } } </script>
正しい使用法は次のとおりです: vue.$ を使用します。 vue が dom 要素構造を変更した後の nextTick() メソッド dom データが更新された後に後続のコードの遅延実行を実装するには
changeTxt:function(){ let that=this; that.testMsg="修改后的文本值"; //修改dom结构 that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom数据更新后延迟执行 let domTxt=document.getElementById('h').innerText; console.log(domTxt); //输出可以看到vue数据修改后并没有DOM没有立即更新, if(domTxt==="原始值"){ console.log("文本data被修改后dom内容没立即更新"); }else { console.log("文本data被修改后dom内容被马上更新了"); } }); },Vue.nextTick(callback) 使用原則:
その理由は、Vue が dom 更新を非同期で実行するためです。データの変更が観測されると、Vue はキューを開き、同じイベント ループでデータの変更を観測するウォッチャーをこのキューにプッシュします。このウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。このバッファリング動作により、重複データによって引き起こされる不必要な計算や DOm 操作を効果的に排除できます。次のイベント ループでは、Vue はキューをクリアし、必要な DOM 更新を実行します。 vm.someData = 'new value' と設定すると、DOM はすぐには更新されませんが、非同期キューがクリアされたとき、つまり次のイベント ループが開始されたときに必要な DOM が更新されます。更新します。この時点で、更新された DOM 状態に基づいて何かを実行したい場合、問題が発生します。 。データ変更後に Vue が DOM の更新を完了するのを待つには、データ変更直後に Vue.nextTick(callback) を使用します。このコールバック関数は、DOM の更新が完了した後に呼び出されます。
以上がvue.nexttickとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。