Vue では、オブジェクトまたは配列を印刷する場合、__proto__プロパティが含まれる場合があります。これは、JavaScript のオブジェクトにはプロトタイプ チェーンがあり、各オブジェクトが他のオブジェクトから継承するためです。__proto__JavaScript オブジェクトの内部プロパティであり、オブジェクトのプロトタイプを指します。
Vue でオブジェクトまたは配列を印刷すると、通常、ブラウザのコンソールにはプロトタイプ チェーンを含むオブジェクトの完全な構造が表示されます。これは、オブジェクトの継承関係とプロトタイプ チェーン構造を理解できるようにするために行われます。
例として、Vue インスタンスがあるとします。
const app = new Vue({
data() {
return {
message: "Hello, Vue!"
};
}
});
インスタンスのプロパティをコンソールに出力するとdata、次のような出力が表示される場合があります。
console.log(app.data);
// Output: { message: "Hello, Vue!", __ob__: Observer }
この例では、プロパティに加えてmessage、 という名前のプロパティもあります__ob__。これは、オブジェクトが監視された (監視可能) ことを示す応答プロパティを実装するために Vue によって内部的に使用されます。__ob__プロパティは応答性を実装するために使用される内部プロパティであり、オブジェクトの実際の機能には影響しません。
実際の開発では、コンソール出力の__proto__またはプロパティにあまり注意を払わないでください。これらは一部の内部プロパティであり、直接アクセスしたり変更したりしないでください。__ob__コンソール出力の内部プロパティではなく、実際のデータとロジックに焦点を当てる必要があります。
JavaScript の Array プロトタイプは、アプリケーションで作成されたすべての配列で使用できるメソッドのセットを提供するオブジェクトです。Vue.js はこのアーキタイプを利用して、リアクティブ システムによるリストの処理を提供します。
__ob__属性の存在はデータを処理する際の Vue.js の内部メカニズムであり、通常は開発中に直接操作する必要はありません。これは Vue の応答性の性質を実装するために使用され、データが変更されたときにビューを自動的に更新できるようにします。
thisオブジェクトは Vue インスタンスを指します。
Vue.js では、__ob__in はObserverVue 内のオブザーバー オブジェクト (Observer Object) を指します。このObserverオブジェクトは Vue の応答システムの中核であり、データ オブジェクトの変更を監視し、データが変更されたときに更新するよう依存関係に通知する役割を果たします。
Vue が応答性の高いデータを作成すると、各データ オブジェクト (Vue インスタンスのdata、などを含む) に対応するオブジェクトが作成されます。このオブジェクトは、データ オブジェクトのすべてのプロパティを走査し、それらをリアクティブ データに変換し、データに対するアクセスおよび変更操作をインターセプトするゲッターとセッターを設定します。computedpropsObserverObserver
このようにして、 のthis.myListデータを変更すると、Observerデータの変更を監視し、関連する依存関係に通知し、関連するビューの再レンダリングをトリガーします。
__ob__と はVue によって内部的に使用される非表示のプロパティおよびオブジェクトですがObserver、通常、開発中にこれらを直接操作する必要はありません。Vue は、データのリアクティブな変換と依存関係の追跡を自動的に処理するため、データ駆動型のアプリケーション ロジックの作成に集中できます。