vue组件data属性返回数据的问题？

Question

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>
<script>
    var data = {
      counter: 0
    };
    
    Vue.component('my-component', {
      template: '<button @click="counter++">{{ counter }}</button>',
      data: function() {
      return data;
        }
    });
    
    var app = new Vue({
      el: '#app'
    })
</script>

我知道这个点击任一button，counter都会+1。
但是，template: '<button @click="counter++">{{ counter }}</button>',这一行里面的counter不应该写成data.counter吗？为什么直接写对象里面的属性也可以使用？

Answer 1

注意这里：

data: function() {
  return data;
}

这里的第一个data对象得到的是下面这个对象：

var data = {
      counter: 0
    };

第二个data并非是第一个data的属性，而是上面var声明的data的引用。
实际上相当于这样：

data: function() {
  return {
    counter:0
  }
}

有时候并非所有的变量声明都写在return里，这时候可以直接这样return。
当然也可以这样：

var key1 ={xxx:xxx};
data: function() {
  return {
    //一些已有变量
    key:value,
    //外部变量
    key1
  }
}

Answer 2

Vue 已经自动将counter绑定到数据对象上了。