web-dev-qa-db-ja.com

Vue.jsの作成済イベントとマウント済イベントの違い

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

created

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

mounted

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

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

私はその理論を理解していますが、実践に関して2つの質問を持っています。

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

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からデータをフェッチし、wostexのようにデータプロパティに設定するために使用されます。しかしSSRではmounted()フックが存在しないため、作成したフックでのみデータをフェッチするようなタスクを実行する必要があります。

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

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

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