首先:

组件是一个可复用的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

Logo

前往低代码交流专区

更多推荐