Vue.jsで作成されたイベントとマウントされたイベントの違い

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

created

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

mounted

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

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

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

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

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

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

console.log(element.innerHTML)

だからあなたの質問：

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

Createdは通常、バックエンドAPIからデータをフェッチし、それをデータプロパティに設定するために使用されます。しかし、SSR mounted()フックには存在しないため、作成されたフックのみでデータをフェッチするなどのタスクを実行する必要があります

2. 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;
    });
}