美文网首页
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为什么要是函数

    看vue文档时,一开始给的简单实例中data都是对象建立,如 但是到了组件内容就明确强调了一点data必须是函数 ...

  • Vue源码

    为什么data是函数,而components是对象? data函数如果没有返回值会报错吗? 为什么props定义的...

  • vue 组件中的data为什么是一个函数

    组件中 data 为什么是一个函数? 为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 ...

  • 组件避免冲突

    组件中data为什么是一个函数 子组件中的 data 属性值会相互影响,如果组件中 data 选项是一个函数,那么...

  • vue相关的知识

    1. 组件的data为什么必须是函数? 组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次...

  • Vue-2

    组件模板的抽离写法 为什么组件data必须是函数

  • vue 基础组件

    组件注册的注意事项 在组件中data必须要是function() 只有组件当中的data是函数的时候,在组件复用的...

  • vue相关知识点

    组件中的 data 为什么是函数 组件是用来复用的,组件中的data应是互不影响的,防止data复用。 v-if和...

  • 4.vue的相关概念

    Vue.extend //拓展vue构造器options必须要是函数,但是data这个是特例除外。Vue.nex...

  • 11. 组件中的data以及data为什么必须是函数

    组件中的data保存的是自己的数据,但是这个data必须是个函数,然后返回一个对象的形式 组件中的data为什么必...

网友评论

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

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