コードワードは簡単ではなく、役立つ学生は私のWeChat公式アカウントに注意を払うことを望んでいます：コードプログラムライフ、ありがとう！
この号のテーマはVueのライフサイクルです。ライフサイクルとは
何かについてお話ししましょう。これはBaidu百科事典が言っていることです：
ライフサイクルとは、物体の誕生、老化、病気、そして死を指します。
私たち一人一人が、誕生、老年、病気、そして死の過程を経験します。これは、誰もが取り除くことができないという事実です。
同じことは、プログラムについても同様です。ページやコンポーネントもありますのプロセス誕生、変更、および破壊を。これは、そのライフサイクルです。手順は元々、人間の生活における客観的な事実と法律に従います。
Vueのライフサイクルを見てみましょう。
これは、公式文書の図である：
それはであるため、この図は少し困難に見えるかもしれませんが、純粋な英語、および概念のいくつかを理解するのが難しいことがある。全体のVueプロジェクトの開発プロセスを実装あなたがそうならば、Aを持っています貧弱な基盤、それは必要ではありません今それを入手してください。
公式文書にも次のように書かれています。
すぐにすべてを理解する必要はありませんが、学習と使用を続けると、その参照値はますます高くなります。
ライフサイクルフック関数のすべてを上手に使用する必要はありません。一部のフック関数はほとんど使用されないため、簡単に理解するだけで済みますが、頻繁に使用するものもいくつか習得する必要があります。
図解されたプロセスに従って、上から下に順番にそれについて話しましょう：
beforeCreate
この段階は、インスタンスが初期化された後、コンポーネントが作成される前です。この時点では、データ監視およびイベントメカニズムは形成されておらず、DOMノードを取得できません。
これは作成前の段階であり、この段階では多くのイベントメカニズムやデータ観測が形成されておらず、DOMを取得できないため、この段階ではあまり実用的ではありません。簡単に理解するだけで済みます。
作成した
インスタンスが作成された直後に呼び出されます。このステップで、インスタンスは次の構成を完了しました：データオブザーバー、プロパティとメソッドの計算、および監視/イベントイベントコールバック。ただし、マウントフェーズはまだ開始されておらず、$ elプロパティはまだ利用できません。
これは作成後の段階です。この段階では、Vueインスタンスが作成されていますが、DOM要素はまだ使用できません。
このフック関数は非常によく使用されます。この関数でバックエンドインターフェイスを要求するか、コンポーネント通信の値を受け取ることができます。これは非常に重要な段階であり、多くのことが可能であり、ほとんどの動的プロジェクトが頻繁に使用されます。
beforeMount
マウントの開始前に呼び出されます：関連するレンダリング関数が初めて呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。
これはマウントする前の段階です。この段階では、特定のDOM要素を取得できませんが、vueマウントのルートノードが作成されています。DOMに対する次のVue操作は、このルート要素の周囲で続行されます。beforeMountステージは移行段階です。通常、プロジェクトは1回または2回しか使用できません。
マウント
インスタンスがマウントされた後に呼び出され、この時点でelは新しく作成されたvm。＄ elに置き換えられます。ルートインスタンスがドキュメント内の要素にマウントされている場合、マウントされたときにvm。＄ elもドキュメント内にあります。
マウントは、すべてのサブコンポーネントも一緒にマウントされることを保証するものではないことに注意してください。ビュー全体がレンダリングされるまで待ちたい場合は、マウントされた内部でvm。$ nextTickを使用できます。
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
これは、実装後のステージ。マウントもされていることを機能私たちが通常使用し、多くのを。一般的に、私たちの非同期要求がここに書かれています。この段階で、データとDOMの両方がレンダリングされています。
beforeUpdate
データが更新されたとき、仮想DOMにパッチが適用される前に呼び出されます。これは、追加されたイベントリスナーを手動で削除するなど、更新前に既存のDOMにアクセスするのに適しています。
最初のレンダリングのみがサーバー側で実行されるため、このフックはサーバー側のレンダリング中には呼び出されません。
これは更新前の段階です。この段階では、vueはデータ駆動型DOMの原則に従います。beforeUpdate関数は、データが更新された直後にデータを更新しませんが、DOM内のデータは変更されます。これはVue双方向データバインディングの関数です。
更新しました
データの変更により、仮想DOMが再レンダリングされ、パッチが適用されます。その後、フックが呼び出されます。
このフックが呼び出されると、コンポーネントDOMが更新されたため、DOMに依存する操作を実行できるようになりました。ただし、ほとんどの場合、この期間中にステータスを変更することは避けてください。それに応じて状態を変更したい場合は、通常、代わりに計算された属性またはウォッチャーを使用するのが最善です。
updateは、すべての子コンポーネントが一緒に再描画されることを保証するものではないことに注意してください。ビュー全体が再描画されるまで待機する場合は、更新された
vm。$ nextTickを使用できます。
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
このフックは、サーバー側のレンダリング中には呼び出されません。
これは更新後の段階であり、DOMは変更されたコンテンツと同期されます。
beforeDestroy
インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に使用可能です。
このフックは、サーバー側のレンダリング中には呼び出されません。
これは破棄の前の段階です。前の段階では、Vueはデータを介してDOMの更新を正常に駆動しました。DOMを操作するためにVueが不要になったら、Vueを破棄する必要があります。つまり、VueインスタンスとVueインスタンス間の関連付けをクリアする必要があります。 DOMを作成し、destroyメソッドを呼び出して現在のコンポーネントを破棄します。破棄する前に、beforeDestroyフック関数がトリガーされます。
破壊されました
インスタンスが破棄された後に呼び出されます。フックが呼び出された後、Vueインスタンスに対応するすべての命令がバインド解除され、すべてのイベントリスナーが削除され、すべてのサブインスタンスも破棄されます。
このフックは、サーバー側のレンダリング中には呼び出されません。
これは破壊後の段階です。破壊後、破壊されたフック機能がトリガーされ、いくつかの操作が実行されます。
vueのライフサイクルのアイデアはコンポーネントの開発を通じて実行されます。そのライフサイクルをさまざまなフック機能に慣れることで、データフローとDOMへの影響を正確に制御できます。vueのライフサイクルのアイデアは鮮やかです。 VnodeとMVVMの具体化と継承。
上記では、Vueライフサイクルの8つの主要な段階について簡単に説明しました。これらは、作成前、作成後、マウント前、マウント後、更新前、更新後、破棄前、および破棄後です。これはライフサイクル全体ではなく、あまり役に立たないものもあるため、詳細な説明はありません。必要な学生は公式文書を参照できます。
コードを使用して、ライフサイクルのさまざまな段階を実際に示しましょう。
<style>
.active {
color:#f00
}
</style>
<div id="app">
<App></App>
</div>
<script>
Vue.component('Test',{
data () {
return {
msg:'Hello',
isRed:false
}
},
methods: {
handleClick(){
this.msg = 'msg被改变了';
this.isRed = !this.isRed;
}
},
template:`
<div>
<button @click='handleClick'>改变</button>
<h3 :class='{active:isRed}'>{
{msg}}</h3>
</div>
`,
beforeCreate () {
console.log("组件创建之前",this.$data);
},
created () {
// 非常重要的事情,可以在此时发送ajax请求后端的数据
console.log("组件创建完成",this.$data);
},
beforeMount () {
// 即将挂载Dom
console.log("Dom挂载之前",document.getElementById('app'));
},
mounted () {
// Dom挂载完成,
// 也可以发送ajax
console.log("Dom挂载完成",document.getElementById('app'));
},
beforeUpdate () {
// 可以获取数据更新之前的Dom
console.log('数据更新之前的Dom',document.getElementById('app').innerHTML);
},
updated () {
// 可以获取数据更新之后的Dom
console.log('数据更新之后的Dom',document.getElementById('app').innerHTML);
},
beforeDestroy () {
console.log('销毁之前',);
},
destroyed () {
console.log('销毁完成');
}
})
const App = {
data () {
return {
isShow:true
}
},
methods: {
click(){
this.isShow = !this.isShow;
}
},
components: {
},
template:`
<div>
<Test v-if='isShow'></Test>
<button @click='click'>销毁</button>
</div>
`,
}
new Vue({
el:'#app',
data:{
},
components:{
App
}
});
</script>
グローバルコンポーネントのテストとローカルコンポーネントのアプリを作成しただけです。通常の出力ステートメントに加えて、変更用と破棄用の2つのボタンも作成しました。主に、ライフサイクルの更新フェーズと破棄フェーズをよりよく確認するためです。
これは、ページ初期化後のページコンテンツです。
これは、変更ボタンをクリックした後のページコンテンツです。
これは、破棄ボタンをクリックした後のページコンテンツです。
各段階がコードを通じて示されていると、それは非常に明確です。
プロジェクトを作成するときは、ライフサイクルフック関数も使用できることを常に念頭に置いておく必要があります。実際、ライフサイクル機能の意味は、開発者の操作を容易にすることであり、各段階で、完了したい多くの操作を実行できます。
この問題は、持っているより多くのコンテンツので、ライフサイクルの知識ポイントは非常に、非常に重要です。かどうかはそれがインタビューや実際のビジネスの発展、それは非常に便利です、それも困難である。あなただけ学ぶために始めている場合は、フォロー公式のVueプロンプト：すべてをすぐに理解する必要はありませんが、学習して使用し続けると、その参照値はますます高くなります。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
