今日の主人公は、Vueによって公式に提供されているAPIであるnextTickです。
紹介する前に、まず1つのことを理解する必要があります。
VueがDOMを非同期に更新することに気付いていないかもしれません。データの変更をリッスンしている限り、Vueはキューを開き、同じイベントループで発生するすべてのデータの変更をバッファリングします。同じウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは1回だけです。
これは、公式のVueドキュメントにあるVueによるDOMキューの非同期更新の簡単な紹介です。
実際、DOMを更新するときにVueが非同期で実行されるという1つのことで十分であることがわかっています。非同期とは何かを誰もが知っている必要があります。わからない場合は、私の以前のブログを確認してください。
非同期実行の欠点は、DOMを使用する必要がある場合でも、DOMがまだ読み込まれていて、実際には更新されないが、前の操作または後続の操作が更新されることです。
とにかく、DOMの更新結果を正常に取得できなくなります。
最初に簡単な例を見てみましょう。
<div id="app">
{
{message}}
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
message:'Ray'
}
});
vm.message = 'CreatorRay';
console.log(vm.$el.textContent);
</script>
単純なvueインスタンスvmを作成し、vmオブジェクトを操作して、メッセージをRayからCreatorRayに変更することにより、その内部データ値を変更しました。
次に、vm。$ el.textContentを介して更新されたコンテンツを取得します。
結果を見てみましょう
。vm。$ el.textContentのコンテンツはRayです。
これが示すように、更新されたデータを取得できませんでした。これは、VueがDOMを非同期にレンダリングした結果です。
これは非常に不快であり、実際のロジック開発を妨げる可能性があります。
したがって、nextTickAPIの役割はここにあります。
次に、次のコードを追加します。
Vue.nextTick(()=> {
console.log(vm.$el.textContent);
});
ページがレンダリングされた後、コンソールをもう一度見てください。
このようにして、実際のデータ更新結果を取得できます。
これは、nextTickの最も簡単な使用法の1つにすぎません。
実際の開発要件を備えた開発におけるnextTickの実際のアプリケーションを見てみましょう。
要求する：
これで、開発されたポップアップコンポーネントができました。ポップアップをトリガーするための条件は、バックエンドによって提供されます。つまり、ポップアップウィンドウがトリガーされるタイミングは、バックエンドから提供されるデータによって完全に決定されます。
<div id="app">
<App></App>
</div>
<script>
const Pop = {
data () {
return {
isShow:false
}
},
props:{
name:{
type:String,
default:''
}
},
template:`
<div v-if='isShow'>
{
{name}}
</div>
`,
methods: {
show(){
if(this.name == '触发'){
this.isShow = true; // 弹窗组件展示
}
console.log(this.name);
}
}
}
const App = {
data () {
return {
name:'不触发'
}
},
created () {
// 模拟异步请求
setTimeout(()=>{
// 数据更新
this.name = '触发';
this.$refs.pop.show();
/*this.$nextTick(()=> {
this.$refs.pop.show();
})*/
},1000)
},
components: {
Pop
},
template:`<Pop ref='pop' :name='name' ></Pop>`
}
new Vue({
el:'#app',
data:{
},
components:{
App
}
});
</script>
私は単にコードを意味します。
部分コンポーネントPopは、ポップアップコンポーネントとして機能します。部分コンポーネントAppは、AppコンポーネントでPopが使用され、ref属性がPopコンポーネントに書き込まれ、親子コンポーネントの通信を通じて、nameという名前の値のセットが子コンポーネントに渡されます。これはnameは、ポップアップコンポーネントをトリガーするための条件です。
次に、Appコンポーネントの作成されたライフサイクルフックを確認します。バックエンドインターフェイスへのリクエストをシミュレートしましょう。時間を節約するために、setTimeoutを介して非同期リクエストをシミュレートします。
取得するデータ名がtriggerであると仮定して、this.name = 'trigger'を渡します。既存のデータを更新します。名前はtriggerです。これは、ポップアップコンポーネントをトリガーするための条件です。次に、サブアセンブリのPopメソッドを表示するようにトリガーする必要があります。たまたま、ref属性をPopコンポーネントにアタッチしていて、Popコンポーネントオブジェクトを直接取得してそのメソッドを呼び出すことができます。これは非常に優れています。従来のメソッドで成功できるかどうかを見てみましょう。this。$ refs.pop.show（）を
介して子コンポーネントのメソッドを直接呼び出します。結果を見てみましょう：のshowメソッドサブコンポーネントが実際に正常に呼び出されますが、中に名前と値の出力showメソッドがトリガされない、とページのコンテンツが表示されません。これは、setTimeoutで名前の値を変更する操作が、時間内にサブコンポーネントを更新しなかったことを示しています。
では、nextTicknextを試してみましょう。この$ refs.pop.show（）に関する
最初のコメント。 ;
コードに以下を追加します。
this.$nextTick(()=> {
this.$refs.pop.show();
})
結果を見てみましょう。show
メソッドで出力された名前の値がトリガーされ、ページの「ポップアップコンテンツ」もレンダリングされます。
okkkkkk、素晴らしい。
これは私たちの実際の事業開発におけるnextTickのアプリケーションであり、それでも非常に便利です。
Vueは、「データ駆動型」の考え方を使用し、DOMとの直接の接触を避けることを推奨していますが、これを行わなければならない場合もあります。nextTickは私たちの良いヘルパーです。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
