关于vue实例中data的写法

Question

问题描述

发现vue实例中，data的写法可以有下面两种：

//函数形式
data(){
    return{
        limit:3, 
        ...
    }
}

//对象形式
data:{
     limit:3, 
     ...
}

想问一下这两种方式有什么区别

Answer 1

不管哪种写法，目的只有一个保持数据独立空间，而不是很多组件指向同一个data的引用。

vue通过组装各个组件挂在dom树，如果data是一个Object，那么试想一下多次调用组件会产生什么现象，因为Object通过引用传递，那么所有组件操作的数据通过地址引用都指向同一块堆，都操作同一块数据，势必造成状态混乱，实例a组件会影响b组件的数据。
这里仅仅是为了保持状态独立，所以 通过一个函数，实际上是每次返回一个新的 数据对象，即使不使用函数，只要你能保证 每次都是一个新数据的copy也是可以的。 这里的函数不过是一个 函数 工厂而已，工厂模式的一种运用。

Answer 2

vue-cli需要用函数形式，对象形式是引入写法

Answer 3

第一种是写在component组件中的；（组件汇总必须这么写）
第二种是写在vue实例中的；（实例中的写法也是固定的不能混用）

Answer 4

Vue的官网上组件部分有相关说明：组件中的data必须是一个函数，这是为了每个实例各自维护各自的数据，如果data是一个对象的话，就相当于所有组件就是共享这个数据的，会互相影响.