vue定义data的三种方式和区别

前言
最近在学习vue的时候，发现有时候data属性的书写状态有有所不同
在简单的demo中，data属性一般是以属性的方式出现的，而在稍微复杂的项目中，data往往是以函数的方式出现，那么这些书写的形式有什么差异呢？通过官方文档和别人的博客，将答案整理如下：

一、Vue定义data的三种方式
（一）定义为属性
new Vue({
  el : '#app',
data : {
  message : 'Hello, Vue~'
  }
})
（二）定义为函数
new Vue({
  el: '#app',
  data:  function( ){
    return {
      message: 'Hello, Vue~'
    }
  }
})
（三）定义为函数，满足ES6（ECMAScript 6.0 ）规范
和第二种类似,但语言更加简洁

new Vue({
  el : '#app',
  data(){
    return {
      'Hello , Vue'
    }
})
二、上面三种写法的区别
在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为你定义的#yanggb对象不会被复用。

但是如果是在组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况

作者：moutory
链接：https://www.jianshu.com/p/403319671733
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。