为什么Vue中data一定要是一个函数?

1. 什么是函数?

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。js函数语法,函数就是包裹在花括号中的代码块，前面使用了关键词 function： 当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

2. 先抛出答案, 如果在面试的时候被面试官问道, 该如何回答?

我们可以采用总分的说法:

1. 在Vue中根实例的data可以是对象也可以是函数, 但是在组件中的data必须要是一个函数, 组件就是可以复用的Vue实例, 把公共的模块抽离出来, 达到复用和直接使用的效果. 接下来我会采用对比的方式进行说明.

2. 如果data是一个对象的话, 对象是一个引用类型; 它会在堆空间中开辟一片区域, 将内存地址存入. 这就使得所有的组件公共一个data, 当一个组件中修改了data中的数据就会出现一变全变的现象.

3. 如果data是一个函数的话, 且使用return返回一个对象; 这就使得每复用一次组件就会返回一个全新的data(这就相当于scoped, 每一个组件data都是私有的, 互不干扰, 各个组件维护自己的data)

3. 从组件的角度来看为什么data要是一个函数?

• 组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方
• 组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的
• 基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响

4. 从函数的作用域角度来看data要是一个函数?

只有函数才有作用域的问题, 当组件被复用的时候; 函数与函数之间是有作用域的, 所以两个不同的作用域之间, 也是互不干扰的.

5. 总结

data必须是一个函数, 函数的好处就是每一次组件复用之后都会产生一个全新的data. 组件与组件之间各自维护自己的数据, 互不干扰