開発者ドキュメント

Vue.jsコンポーネントのインスタンス化について

Vue.jsを一定期間使用したことがある場合、または Hello World の例を読んだことがある場合は、「データ」などのプロパティが関数である必要があるのはなぜか、すべてがなぜであるのか疑問に思われるかもしれません。別々のブロックで宣言されますが、実行時にコンポーネントにマウントされます。 さて、ここにあなたの説明があります。

コアコンセプト

これらすべてには非常に明確な理由があります。 一つには、Vueコンポーネントはほとんど静的です! うん! メソッド、プロパティ定義、計算されたプロパティを含むコンポーネント宣言は、アプリ内のそのコンポーネントのすべてのインスタンス間で共有されます。 Vueがコンポーネントの特定のインスタンスに対してメソッドを実行する必要がある場合、Vueはそれらを apply()*して、適切なオブジェクトを*thisとして取得します。

理由:メモリを節約する

Angle2 や(場合によっては) React などの多くのフレームワークは、コンポーネントの各インスタンスを個別のオブジェクトにします。 Angular 2 [要出典]は、すべてのコンポーネントがクラスのインスタンスである極端なケースです。 これは、各コンポーネントに必要なすべてがすべてのコンポーネントに対して初期化されることを意味します。 ただし、通常は、初期化ごとにコンポーネントのデータを個別に保持するだけで済みます。 方法などは同じです。

Vueは、 data をオブジェクトを返す関数にすることで、この落とし穴を回避します。 これにより、コンポーネント全体を完全に再インスタンス化する必要なしに、個別のコンポーネントが個別の内部状態を持つことができます。 メソッド、計算されたプロパティ定義、およびライフサイクルフックは、一度だけ作成および保存され、コンポーネントのすべてのインスタンスに対して実行されます。

理由:静的コンポーネント

Vue 2は、高速で軽量な静的コンポーネントの概念を完全に取り入れています。 これらには内部状態やデータがなく、通常は1回だけ、または外部状態の変化時にのみレンダリングされます。 これにより、このような機能コンポーネントを非常に高速にすることができます。

このような機能を利用するには、テンプレートで v-once を使用してプロパティを一度だけレンダリングするか、コンポーネント定義で Functional:trueを使用してコンポーネントを機能するように宣言します。 。

潜在的な混乱

Vueを初めて使用する人は、コンポーネントの状態を data で宣言し、計算されたプロパティを computerd で、メソッドを methods で宣言すると、すべてアクセスされることに気付くことがよくあります。 this.type.thingの代わりにthis.thingで(例: this.methods.myMethod()の代わりに this.myMethod()。)

これもまた、コンポーネント定義が実際には単なる定義であるためです。 メソッドが実行される実際のコンポーネントは異なります。 Vueは、コンポーネントのアセンブル方法を知るために、これらの計算、メソッド、小道具、およびデータ定義を必要としますが、便宜上、これらのプロパティではなく、コンポーネントのルートにマップします。

ちなみに、実行時にthis。$data.prop this。$methods.method()に実際にアクセスできますが、これはお勧めしません。

うまくいけば、この記事があなたのために問題を解決するのに役立つでしょう。 🙂

モバイルバージョンを終了