VUE---data

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

data必须是函数的原因：

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

示例：

  // 组件
  

    -
    {{ count }}
    +
  

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

  // 根组件
  
  

  
  

  

结果如下：

 

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

  // 组件
  

    -
    {{ count }}
    +
  

  data: {
    count: 100,
  },

  // 根组件