美文网首页
data为什么要是函数

data为什么要是函数

作者: _v_xw | 来源:发表于2017-05-25 14:53 被阅读0次

    看vue文档时,一开始给的简单实例中data都是对象建立,如

    data: {
      a:1,
      b:2
    }
    

    但是到了组件内容就明确强调了一点data必须是函数

    data () {
      return {
        a: 1,
        b: 2,
      }
    }
    

    这主要的原因是JS原生中,如果在原型链中如果,如果定义成对象,在后面的实例中,一个实例对象的值有了变化,会影响所有的实例。
    通过函数的形式,可以使得每个实例独立,这样数据变化也就不会影响其他实例。
    对比下面两种实例创建后的效果

    var MyComponent = function() {}
    MyComponent.prototype.data = {
      a: 1,
      b: 2,
    }
    // 上面是一个虚拟的组件构造器,真实的组件构造器方法很多
    
    var component1 = new MyComponent()
    var component2 = new MyComponent()
    // 上面实例化出来两个组件实例,也就是通过<my-component>调用,创建的两个实例
    
    component1.data.a === component2.data.a // true
    component1.data.b = 5
    component2.data.b // 5
    
    var MyComponent = function() {
      this.data = this.data()
    }
    MyComponent.prototype.data = function() {
      return {
        a: 1,
        b: 2,
      }
    }
    component1.data.a === component2.data.a // true
    component1.data.b = 5
    component2.data.b // 2
    

    所以data要设置成函数

    引用自 https://segmentfault.com/q/1010000006242139的 李爱国 的答案

    相关文章

      网友评论

          本文标题:data为什么要是函数

          本文链接:https://www.haomeiwen.com/subject/wjczxxtx.html