VUE原型对象的__ob__ 和 __proto__

在 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 内部用于实现响应式的属性,表示这个对象已经被观察(observable)了。__ob__ 属性是用于实现响应式的内部属性,它并不影响对象的实际功能。

在实际开发中,不要过于关注控制台输出中的 __proto____ob__ 属性,它们都是一些内部的属性,不应该被直接访问或修改。重点应该放在实际的数据和逻辑上,而不是在控制台输出中的内部属性上。

JavaScript中的数组原型(Array prototype)是一个对象,它为应用程序中创建的所有数组提供一组可用的方法。Vue.js利用这个原型来通过其响应式系统提供对列表的处理。

__ob__属性的存在是Vue.js在处理数据时的内部机制,通常我们在开发中不需要直接操作它。它用于实现Vue的响应式特性,让数据变化时能够自动更新视图。

this 对象指向的是 Vue 实例,

在 Vue.js 中,__ob__ 中的 Observer 是指 Vue 内部的观察者对象 (Observer Object)。这个 Observer 对象是 Vue 响应式系统的核心,它负责监听数据对象的变化,并在数据发生变化时通知依赖进行更新。

当 Vue 创建响应式数据时,会为每个数据对象(包括 Vue 实例的 datacomputedprops 等)创建一个对应的 Observer 对象。这个 Observer 对象会遍历数据对象的所有属性,将它们转换为响应式数据,并设置 getter 和 setter 来拦截对数据的访问和修改操作。

通过这种方式,当我们修改 this.myList 中的数据时,Observer 会监听到数据的变化,并通知相关的依赖,从而触发重新渲染相关的视图。

虽然 __ob__Observer 是 Vue 内部使用的隐藏属性和对象,但通常在开发过程中我们无需直接操作它们。Vue 会自动处理数据的响应式转换和依赖追踪,使得我们可以专注于编写数据驱动的应用程序逻辑。

猜你喜欢

转载自blog.csdn.net/m0_57263959/article/details/131941062