Vue2.x学习笔记：第3章-1： data属性的三种写法及区别

1、三种写法代码

方法一：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

方法二：

export default {
  name: 'app',
  data: function(){
      return {
          msg: "binge"
      }
  }
}

方法三：

export default {
  name: 'app',
  data() {
      return {
          msg: "binge"
      }
  }
}

2、区别

区别一：
第一种是对象形式是引入写法（vue.js 在网页中引入），
第二三种是基于脚手架（vue-cli）的写法，写在component组件中的；（组件汇总必须这么写）；

Vue的官网上组件部分有相关说明：组件中的data必须是一个函数，这是为了每个实例各自维护各自的数据，如果data是一个对象的话，就相当于所有组件就是共享这个数据的，会互相影响.

区别二：
第三种是第二种的ES6写法

区别三：
在简单的Vue实例中，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。