vueフレームワークのnextTickについて
1100 ワード
vueのデータの傍受は同期ですか、それとも非同期ですか.どのようにしてデータを傍受しますか?
nextTick()とは
nextTickは、次回のDOMツリー更新時にコールバック関数を遅延するトリガである.最初の質問の答えは:1.非同期2.nextTick()
nextTick()をいつ使用するか
シーン1.义齿
createdフック関数でdomを操作する場合.createdではdomツリーがレンダリングするため、domツリーの操作は無駄であり、このときdomツリーを操作するにはnexttickに操作内容を置くしかない、すなわちdomツリーが更新されたときに実行する.
シーン2.データを更新したら直ちにjsで認識図を操作する
シーン3.サードパーティ製プラグインを使用する場合
サードパーティ製プラグインの中にはdomツリーのリフレッシュ後に適用するものもあります.
nextTick()とは
nextTickは、次回のDOMツリー更新時にコールバック関数を遅延するトリガである.最初の質問の答えは:1.非同期2.nextTick()
nextTick()をいつ使用するか
シーン1.义齿
createdフック関数でdomを操作する場合.createdではdomツリーがレンダリングするため、domツリーの操作は無駄であり、このときdomツリーを操作するにはnexttickに操作内容を置くしかない、すなわちdomツリーが更新されたときに実行する.
created(){
let that = this // this
that.$nextTick(function(){
//dom
})
}
シーン2.データを更新したら直ちにjsで認識図を操作する
// dom
data:{testMsg:" "},
methods:{
changeTxt(){
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 ");
}
});
}}
シーン3.サードパーティ製プラグインを使用する場合
サードパーティ製プラグインの中にはdomツリーのリフレッシュ後に適用するものもあります.