VUE---data

vue中一个组件的data选项必须是一个函数data() { return {} }。

data必须是函数的原因：

        每次创建新的组件实例，都会重新执行一次data函数，从而得到一个新的对象，以保证每个组件实例，维护独立的一份数据对象，互不影响。

示例：

  // 组件
  <div>
    <button @click="count--">-</button>
    {{ count }}
    <button @click="count++">+</button>
  </div>

  data() {
    return {
      count: 100,
    };
  },

  // 根组件
  <my-button></my-button>
  <hr />
  <my-button></my-button>
  <hr />
  <my-button></my-button>

结果如下：

 

 若写成一下样式，则无论点击哪个按钮，三个数字会统一修改

  // 组件
  <div>
    <button @click="count--">-</button>
    {{ count }}
    <button @click="count++">+</button>
  </div>

  data: {
    count: 100,
  },

  // 根组件
  <my-button></my-button>
  <hr />
  <my-button></my-button>
  <hr />
  <my-button></my-button>