为什么vue组件里面的data一定要是函数

  理解这个问题,得先要能理解js中堆空间和栈空间的使用规则。

  栈空间是存放基本数据类型(undefined,null,string,number,Boolean),这些数据占用的内存空间的大小是确定的,并由系统自动分配和自动释放。比如创建变量var a=4;var b=4;改变a的值为3,b的值却不变。因为他们的引用地址不变。这是传值。

  堆空间是存放引用数据类型(Object、Array、Function),引用类型的数据的地址指针是存储于栈中的,当我们想要访问引用类型的值的时候,需要先从栈中获得对象的地址指针,然后,在通过地址指针找到堆中的所需要的数据。如果对象直接复制,比如定义一个arr = [1,2,3],arr1 = arr,arr赋予给arr1的时候传的是栈中的地址(相当于新建了一个不同名“指针”),而不是堆内存中的对象的值。arr、arr1都指向同一块堆内存,arr1修改堆内存的时候,也就会影响到arr。这是传址。

  Vue组件中的data,因为组件是可以复用的,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了。data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。

posted @ 2018-09-11 16:21  红枣味酸奶  阅读(545)  评论(0编辑  收藏  举报