[解決済み】Vue.jsのcreatedイベントとmountedイベントの違いについて

質問

Vue.jsのドキュメントでは created と mounted イベントは次のようになります。

created

インスタンス生成後、同期的に呼び出される。この時点で この段階では、インスタンスはオプションの処理を終了しています。 データ観測、計算されたプロパティ。 メソッド、ウォッチ/イベントコールバック。しかし、マウント・フェーズはまだ が開始され、$el プロパティはまだ使用できません。

mounted

インスタンスがマウントされた後に呼び出され、elが置き換えられます。 を新しく作成したvm.$elに置き換えてください。もし、ルートインスタンスが を使用すると、vm.$el も文書内の要素になります。 が呼ばれる。

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

理屈はわかるのですが、私は 2つの質問 ということです。

1. というケースはありますか？ created よりも mounted ?
2. を使用することができます。 created イベントは、現実の (実コードの) 環境では の状況を教えてください。

どのように解決するのですか？

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からデータを取得し、データプロパティに設定するために使用されます。しかし、SSRでは mounted() フックが存在しないため、データ取得などのタスクは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;
    });
}