Vue LifeCycleについて
面接でライフサイクルがよくわからなくて慌てたことがあります
よく整理して、頭の中でよく知っておきましょう.
ライフサイクルは何ですか?
構成部品のライフサイクル
vueの素子には約
画像ソースの表示
1. Create
ライフサイクルで最初に実行します.
Domを作成する前なので
beforeCreate
すべてのhookで最初に実行されるhook.実行前にデータとイベントにアクセスできません.
構成部品がDOMに追加されたときに実行されるライフサイクルフック.サーバレンダリングはサポートされておらず、初期レンダリングの前にドームを変更できます.ただし、初期に
beforeMount
ほとんど使わないし、お勧めもしないフックです.
レンダリング後にDOMを変更する必要がある場合は、
mounted
仮想DOMを実際のDOMにアタッチして実行します.this.$elを含むデータ、計算、メソッド、watchなどにアクセスできます.
構成部品で使用されるプロパティが変更されたり、構成部品が再レンダリングされたりしたときに実行されるhook.構成部品の再レンダリング時間をデバッグまたは構成で理解する場合に使用します.
beforeUpdate
構成部品のデータが変化するため、DOMが再レンダリングする前に呼び出されるhook.レンダリング前にデータを取得して変更できます.値が変更されても
updated
データ変更後にDOMを再レンダリングし、パッチ後に呼び出されたhook.すべてのchild素子の再レンダリング状態が保証されないという特徴があります.ここで状態を変えると無限ループに陥るので気をつけましょう.
4. Destroy
beforeDestroy
構成部品が消える前に呼び出されます.アクティビティを削除するときに使用したほうがいいです.
destroyed
消滅した後に呼び出される.vueインスタンスのすべてのディレクトリ(-v)はバインドを解除し、すべてのイベントが削除されます.
よく整理して、頭の中でよく知っておきましょう.
ライフサイクルは何ですか?
構成部品のライフサイクル
vueの素子には約
생성(create) -> Dom에 부착(mount) -> 업데이트(update) -> 사라짐(destroy)
のプロセスがある.画像ソースの表示
1. Create
ライフサイクルで最初に実行します.
Domを作成する前なので
this.$el
は使えず、Domにアクセスするとエラーが発生します.beforeCreate() => data() => created()
の順序で行います.beforeCreate
すべてのhookで最初に実行されるhook.実行前にデータとイベントにアクセスできません.
export default {
data() {
return{
user : ''
}
},
beforeCreate(){
console.log(this.user); //undefind
}
}
createddata
およびevent
に近づくことができる.しかし、まだDomに近づくことはできない.export default {
data() {
return{
user : '홍길동'
}
},
methods:{
userEvent() {
console.log('유저 이름은?')
}
},
created(){
this.userEvent(); //"유저 이름은?"
console.log(this.user); //"홍길동"
}
}
2. Mount構成部品がDOMに追加されたときに実行されるライフサイクルフック.サーバレンダリングはサポートされておらず、初期レンダリングの前にドームを変更できます.ただし、初期に
data
を変更する必要がある場合は、create hookを推奨します.beforeMount
ほとんど使わないし、お勧めもしないフックです.
data
を早期に設定する必要がある場合は、create
フックをレンダリング後にDOMを変更する必要がある場合は、
mounted
が使用されるためです.mounted
仮想DOMを実際のDOMにアタッチして実行します.this.$elを含むデータ、計算、メソッド、watchなどにアクセスできます.
export default {
mounted() { // $el 을 사용할 수 있습니다.
console.log('mounted', this.$el);
}
}
3. Update構成部品で使用されるプロパティが変更されたり、構成部品が再レンダリングされたりしたときに実行されるhook.構成部品の再レンダリング時間をデバッグまたは構成で理解する場合に使用します.
beforeUpdate
構成部品のデータが変化するため、DOMが再レンダリングする前に呼び出されるhook.レンダリング前にデータを取得して変更できます.値が変更されても
beforeUpdate
hookは呼び出されないため、無限ループに陥ることはありません.updated
データ変更後にDOMを再レンダリングし、パッチ後に呼び出されたhook.すべてのchild素子の再レンダリング状態が保証されないという特徴があります.ここで状態を変えると無限ループに陥るので気をつけましょう.
4. Destroy
beforeDestroy
構成部品が消える前に呼び出されます.アクティビティを削除するときに使用したほうがいいです.
destroyed
消滅した後に呼び出される.vueインスタンスのすべてのディレクトリ(-v)はバインドを解除し、すべてのイベントが削除されます.
Reference
この問題について(Vue LifeCycleについて), 我々は、より多くの情報をここで見つけました https://velog.io/@rhak39/Vue-LifeCycle에-대해-알아보자テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol