Vue LifeCycleについて


面接でライフサイクルがよくわからなくて慌てたことがあります
よく整理して、頭の中でよく知っておきましょう.
ライフサイクルは何ですか?
構成部品のライフサイクル
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)はバインドを解除し、すべてのイベントが削除されます.