Vue 中的 data 必须是个函数,因为当data是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。
简单来说,就是为了保证组件的独立性和可复用性,如果data是个函数的话,每复用一次组件就会返回新的data,类似于给每个组件实例创建一个私有的数据空间,保护各自的数据互不影响。
先举个例子吧,如果data单纯是个对象,看它的两个实例对象调用了他,里面的数据会不会发生变化:
function foo() {
this.data = this.data
}
foo.prototype.data = {
name: '张三',
age: 18
}
let f1 = new foo()
let f2 = new foo()
f1.data.name = '李四'
console.log(f1.data.name);//李四
console.log(f2.data.name);//李四
可以看到,f1和f2的 data 指向了同一个内存地址,name都变成了 '李四' ,
因此, data 如果单纯的写成对象形式,会使得所有组件实例共用了一份data,造成一个变了全都会变的结果。
如果data是个函数的话,就不会出现这种情况,每一个调用data , data都会返回一个新的地址,就不会影响到其他实例调用data时,自己的数据受到影响。
function foo() {
this.data = this.data()
}
foo.prototype.data = function () {
return {
name: '张三',
age: 18
}
}
let f1 = new foo()
let f2 = new foo()
f1.data.name = '李四'
console.log(f1.data.name);//李四
console.log(f2.data.name);//张三