In Vue, if you print an object or array, it may contain __proto__the property. This is because objects in JavaScript have a prototype chain, and each object inherits from other objects. __proto__is an internal property of a JavaScript object, which points to the object's prototype.
When you print an object or array in Vue, the browser's console usually shows the full structure of the object, including the prototype chain. This is done to let you understand the inheritance relationship and prototype chain structure of objects.
As an example, suppose we have a Vue instance:
const app = new Vue({
data() {
return {
message: "Hello, Vue!"
};
}
});
If you print the instance's properties to the console data, you might see output similar to the following:
console.log(app.data);
// Output: { message: "Hello, Vue!", __ob__: Observer }
In this example, in addition to messagethe property, there is also a __ob__property named , which is used internally by Vue to implement responsive properties, indicating that the object has been observed (observable). __ob__A property is an internal property used to implement responsiveness, and it does not affect the actual function of the object.
In actual development, don't pay too much attention to __proto__the or __ob__properties in the console output, they are some internal properties and should not be directly accessed or modified. The focus should be on the actual data and logic, not on the internal properties in the console output.
The Array prototype in JavaScript is an object that provides a set of methods available to all arrays created in the application. Vue.js leverages this archetype to provide handling of lists through its reactive system.
__ob__The existence of attributes is the internal mechanism of Vue.js when processing data, and usually we don't need to directly operate it during development. It is used to implement the responsive nature of Vue, allowing the view to be automatically updated when the data changes.
thisThe object points to the Vue instance,
In Vue.js, __ob__in Observerrefers to the observer object (Observer Object) inside Vue. This Observerobject is the core of Vue's responsive system. It is responsible for monitoring changes in data objects and notifying dependencies to update when data changes.
When Vue creates responsive data, it will create a corresponding object for each data object (including Vue instance's data, computed, etc.) . This object traverses all properties of the data object, converts them into reactive data, and sets getters and setters to intercept access and modification operations on the data.propsObserverObserver
In this way, when we modify this.myListthe data in , Observerwe will monitor the data changes and notify related dependencies, thus triggering re-rendering of related views.
Although __ob__and Observerare hidden properties and objects used internally by Vue, usually we don't need to directly manipulate them during development. Vue automatically handles the reactive transformation of data and dependency tracking, allowing us to focus on writing data-driven application logic.