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的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况

参考文章：
https://www.cnblogs.com/yanggb/p/11430019.html

参考官网：
https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
可以重点看里面组件复用的demo