关于vue实例中data的写法

宫秋
  • 207

问题描述

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

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

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

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

回复
阅读 2.9k
4 个回答

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

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

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

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

長风
  • 4
新手上路,请多包涵

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

宣传栏