☰

Vue.js の created イベントと mount イベントの違い 質問する

tag-icon • tag-icon javascript vue.js
Vue.js の created イベントと mount イベントの違い 質問する

Vue.js のドキュメントでは、イベントcreatedとmountedイベントについて次のように説明しています。

created

インスタンスの作成後に同期的に呼び出されます。この段階では、インスタンスはオプションの処理を完了しており、データ監視、計算されたプロパティ、メソッド、ウォッチ/イベント コールバックが設定されています。ただし、マウント フェーズはまだ開始されておらず、$el プロパティはまだ使用できません。

mounted

インスタンスがマウントされた直後に呼び出され、el は新しく作成された vm.$el に置き換えられます。ルート インスタンスがドキュメント内要素にマウントされている場合、mounted が呼び出されると、vm.$el もドキュメント内になります。

このフックはサーバー側のレンダリング中には呼び出されません。

理論は理解していますが、実践に関して2つの質問があります。

  1. createdが使用されるケースはありますかmounted?
  2. created実際の（実際のコードでの）状況で、イベントを何に使用できますか?

ベストアンサー1

created(): オプションの処理は終了しているので、リアクティブdataプロパティにアクセスして、必要に応じて変更できます。この段階では、DOMはまだマウントまたは追加されていません。したがって、ここではDOM操作を行うことはできません。

mounted(): DOM がマウントまたはレンダリングされた後に呼び出されます。ここでは、DOM 要素にアクセスし、たとえば innerHTML を取得するなど、DOM 操作を実行できます。

console.log(element.innerHTML)

それであなたの質問は:

  1. Is there any case where created would be used over mounted?

Created は通常、バックエンド API からデータを取得してデータ プロパティに設定するために使用されます。ただし、SSRmounted()フックが存在しない場合は、created フックでのみデータの取得などのタスクを実行する必要があります。

  1. What can I use the created event for, in real-life (real-code) situation?

レンダリングに必要な初期データ（JSONなど）を外部APIから取得し、それをリアクティブデータプロパティに割り当てるため

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}

おすすめ記事