vue中的data为什么是一个函数

Posted 2022-12-13 理小理...

首先：

组件是一个可复用的Vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用多少次，组件中data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就会被复制一次，、

也就是说如果data是一个函数的话，那么我们每次创建一个新的实例之后，就会调用一个新的data函数。也就是给每一个data数据定义一个新的内存地址。这样的话，修改A而不会影响B.

function Person() 
  this.data = this.data();


Person.prototype.data = function() 
  return 
    name: 'itclanCoder',
  ;
;

var p1 = new Person();
var p2 = new Person();

p1.data.name = 'A'; // A
console.log(p1.data.name); // A
console.log(p2.data.name); // itclanCoder

并且

如果当data是一个对象的话，在Vue中是会报错的

export default 
  data() 
      name: 'itclanCoder',
  ,
;

要了解函数和对象之间的区别：

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；

javascript只有函数构成作用域(注意理解作用域，只有函数构成作用域,对象的以及if()都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

总结：

组件中的data写成函数，数据是以函数的返回值形式定义的，每复用一次，就会产生一个新的data。创建一个新的私有空间，这样的话各个组件实例都有各自的实例，如果写成对象形式，就容易造成数据污染，使得所有组件实例之间共用一份data