关于这个问题,需要意识到:这是因为js的特性,跟vue本身设计无关。js本身的面向对象编程是基于原型链和构造函数,我们会注意到,原型链上添加一般都是一个函数方法而不会去添加一个对象。vue实例中的data是一个对象,作为绑定的数据。而这里组件中的data()必须是一个函数,其实应该叫做setData()。
现在我们开始一步步理解:
一、关于js的数据类型
js中的数据可以分为基础数据类型和引用数据类型
1、基础数据类型
如undefinded,null,Number,String,Boolean,symbol,数据存放在栈中;
2、引用数据类型
即对象数据类型,如:object、array、function,数据存放在堆中,栈中存放的是堆中的引用地址。
二、关于js的深浅拷贝
我们来看看深浅拷贝的区别:
浅拷贝:将原对象或原数组的引用直接赋给新对象/新数组,新对象/数组只是原对象的一个引用
深拷贝:创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”
三、数据类型与深浅拷贝
1、基本数据类型是放在栈里面的,它是按值访问,在栈内存中发生复制行为时系统会为新的变量提供新值,所以两个变量互不影响。
2、引用数据类型是放在堆内存中的,它是按引用访问的,在栈内存中有一个地址是指向堆内存中的引用数据类型的,所以我们拷贝引用数据类型其实就是拷贝了栈内存中的地址,因为地址一样,他们都是指向同一个引用数据类型,所以两个变量会相互影响,这时就必须使用深拷贝了。
四、为什么data要用函数?
经过以上理解,我们可以类比引用数据类型:
Object对象是引用数据类型,如果不用function 函数返回,每个组件的data 都是内存的同一个地址,如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改。而两个实例应该有自己各自的域才对。
这里补充一点:javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)。data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。