首先我们需要了解data两种不同的类型有什么区别:
- 当我们组件中的data写成一个函数时,数据是以函数返回值形式定义的,这样每复用一次data,都会返回一份新的data,拥有自己的作用域,不会产生数据污染。
- 当我们组件中的data写成一个对象时,对象是引用数据类型,它就会共用一个内存地址,在多次使用该组件时,改变其中一个组件的值会影响全部使用该组件的值。
2.理解组件中的 data 必须是一个函数:
- 在vue中一个组件可能会被其他的组件引用,为了防止多个组件实例对象之间共用一个data,产生数据污染。将data定义成一个函数,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响initData时会将其作为工厂函数都会返回全新data对象。
如果data是对象;初始化组件时
javascript
this.options = this.data;
this.options相当于被赋值了data对象的指针;指向堆中的对象;
如果是函数:
javascript
this.options = function() {
return {}
}
函数每次执行时,都会创建新的作用域,返回新的对象,所以组件被多次调用时,相互之间不会影响