问答详情
源自:4-2 使用vue-cli开发TodoList

vue-cli 中的Data为什么要是方法?

为什么data要这么写啊?

提问者:慕UI8405255 2018-04-26 21:11

个回答

  • Dell
    2018-04-28 00:21:44

    并不是这样的,data在子组件里是一个函数,是为了告诉你,这个数据是这个组件独享的,不要和其他组件公用,避免冲突。

  • HackGuy
    2018-06-17 13:00:49

    官网上有非常好的解释, 请点击这里, data必须是一个函数

  • 五月书_D_店
    2018-05-11 11:03:59

    // 直接声明的对象只占某一块内存空间,对它的所有引用共用该空间。

    var data = {

      id: 'abc',

      count: 100

    }

    console.log('type:', typeof data)

    var a = data

    var b = data

    console.log('a.id=', a.id)

    a.id = '007'

    console.log('a.id=', a.id)

    console.log('b.id=', b.id)

    // 方法每次返回的对象在内存中占用不同块空间,每个引用各自维护自己的空间。

    function dfunc() {

      return {

        id: 'default_value',

        count: 1

      }

    }

    console.log('type:', typeof dfunc)

    var a1 = dfunc()

    var b1 = dfunc()

    console.log('a1.id=', a1.id)

    a1.id = '008'

    console.log('a1.id=', a1.id)

    console.log('b1.id=', b1.id)

    猜测:

    Vue 在获取data 这个组件的成员时会先判断其类型,如果是一个对象则直接引用,如果是一个函数则获取函数的返回值。

    以上代码就是模拟Vue 获取data 对象的过程,当data 直接是一个对象时所有该组件的实例公用一份数据,当data 时函数时每个组件实例维护自己的数据。


  • 打代码的Popo
    2018-05-05 22:51:25

    子组件里面的data是函数是因为当我们页面中运用同一个子组件多次,要是data只是一个对象的话,相同子组件就会共享这个data对象,这是一件非常糟糕的事情。写成函数返回一个对象是想让子组件有自己的data对象而不与其它组件共享

  • 依然海飞韵
    2018-04-26 21:40:21

    这是es6的语法,可以更好的优化页面性能吧