深刻理解vue 组件中的 data 为什么必须是函数

关于这个问题，需要意识到：这是因为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是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。