data为什么要是函数

看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的 李爱国 的答案

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容