Vue实例中 data:{}是什么?是对象吗?

各位,在这里的Vue实例中,为什么我用data:{}到底是个什么,可不可以详细的讲一下,还有,创建了一个Vue对象是app,那为什么我用app.data.Data1是错误的呢?那data:{}这个对象的具体用法是什么呢?

img

1.data:{} 是一个 函数(在cli里 他必须是一个函数,因为如果是对象 那么他就 会涉及 引用类形的错误)
vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。
data就是你这个 vue里 双向绑定的数据 ,你在data里声明了,然后 页面里使用。在 生命周期和其它方法里 调用 this.xxx(data里的属性)然后页面会自动 更新。你不在data里声明,它是不会变的。

2.创建了一个Vue对象是app,那为什么我用app.data.Data1是错误的呢?
你在 var app的下面 打印试试,别在 app对象里打印

img

说是对象可能太小看它了,你可以把它理解为当前页面的一个对象存储器和数据存储器。当前页面的所有数据对象都需要在这里面进行时定义

就是页面种所要定义的变量放在data种


data(){
  return {
     param:''//通过 this.param 访问
  }
}

你可以当作 class 来看待,data 是Vue内的一个方法,主要是用来处理响应式数据,new this.data(),拿到返回的对象 obj,对 obj 的每个数据进行 Observer ,将其收集到 deps 内(好久没看,具体何值忘了),大概就是收集依赖,依赖的值来自于data函数,为什么是函数呢,因为如果是对象,可能会复用地址,同一个组件可能存在共用数据的情况,比如你修改了这个组件的值,发现另一个组件的值也发生了变化(同一个组件实例化,一个页面使用了两次);

你可以吧data当做函数 但是他不是个对象,里面存储了很多数据 ,如果是对象的话调用时,调用的同一个东西,会造成变量污染 ,所以data是一个函数,用来存储对象和绑定数据

双向绑定