vue 组件中的 data 为什么必须是函数_vue data函数

• 在说之前我先讲讲深拷贝和浅拷贝

在 javascript 里面简单数据类型的拷贝一般使用浅拷贝，复杂类型一般使用深拷贝，请看例子

var a = 0;
var b = a;
b = 1
console.log('a···' + a,'b···' + b) //a···0 b···1
1
2
3
4

可以看到我把 a 赋值给了 b ，修改了 b 的值后 a 的值没有变

var a = {
    name: '张三',
    age: '18'
};
var b = a;
b.name = '李四';
console.log(a.name) //李四
1
2
3
4
5
6
7

而在对象中我把 a 赋值给了 b ，修改了 b 的name 值后 a 的 name 值也变了

为什么基本数据类型的值没变，引用数据类型的值变了：

1. 基本数据类型是放在栈里面的，它是按值访问，在栈内存中发生复制行为时系统会为新的变量提供新值，所以两个变量互不影响
2. 引用数据类型是放在堆内存中的，它是按引用访问的，在栈内存中有一个地址是指向堆内存中的引用数据类型的，所以我们拷贝引用数据类型其实就是拷贝了栈内存中的地址，因为地址一样，他们都是指向同一个引用数据类型，所以两个变量会相互影响，这时就必须使用深拷贝了

• 如果能理解深浅拷贝就可以理解 data 为什么要用函数了
• 在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。