今天..學的如標題 組件(Components)必須使用function retur

在 vue 的應用程式中 data 可以是物件(object )或是 函式(function)，
但是在 Components 裡面data 只能是 function 這是因為 Components裡的data 都是各自獨立，
而非共用的關係。
如果我們不這樣做，所有實例將共享同一個對象，每次我們更改某些內容時，它都會反映在所有實例中。

demo

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<script type="text/x-template" id="counter-component">
  <div>
    你已經點擊 
    <button  @click="counter += 1">{{ counter }}</button> 下。
  </div>
</script>

Vue.component('button-counter', {
  data() {
    return{
       counter: 0
    } 
  },
  template: '#counter-component'
})
var app = new Vue({
  el: '#app',
});