Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式

一个加数器的例子:

<body>
  <div id="num">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>当前计数:{{counter}}</h2>
      <button @click="counter++">+</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    // 注册全局组件
    Vue.component('cpn', {
      template: '#cpn',
      data(){
        return {
          counter: 0
        }
      }
    });

    new Vue({
      el: "#num"
    })
  </script>
</body>

运行之后:
Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式_第1张图片
这是将加数器组件使用了三次,现在点击第一个加数器按钮:
Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式_第2张图片
第一个计数值增加了,但是后面两个计数没有增加,说明这三个组件实例并不是共用的同一个组件data数据对象。
使用data()方法返回数据对象:

data(){
  return {
    counter: 0
  }
}

每一次返回的对象都是新的对象,会重新创建内存地址,
如果使用这种方式:

data: {
  counter: 0
}

那么每个组件实例都会共享同一个数据对象,这会影响组件的独立使用。

你可能感兴趣的:(Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式)