【Vue和微信小程序】为什么Vue组件中data是一个函数，而小程序中data是一个对象表达式

前言

日常工作中经常使用 Vue 和 小程序，对于Vue组件中data是一个函数，能够理解，但不够深入，小程序中data是一个对象更是百思不得其解，细细思考，偶有所得。

Vue

组件脚本模板

export default {
  components: {
  },
  mounted () {
  },
  computed: {
  },
  // data是一个函数
  data () {
    return {

    }
  },
  methods: {
  }
}

很明显 Vue 组件使用的是 ES Modules 规范，使用 export default 输出，输出的是值的引用。
如果 data 是对象，组件复用时，data 中数据改变会遗留下来，不利于组件数据管理。故 Vue 组件中 data 使用函数返回一个新的对象，避免了组件数据混乱的问题。

小程序

Component构造器定义组件

Component({
  data: {
  },
})

Page构造器注册页面

Page({
  data: {
  },
})

很明显，Page 和 Component 就是一个构造函数，无需 new 只需要传入对象结构的参数即可生成新的实例。
在 Compnent 自定义组件可以复用，复用时每次传入的对象参数都是不同的，故 data 在组件中是私有的，所以，此处的 data 可以用对象表达式。

总结

• Vue 组件中输出的是值的引用，组件复用时，输出的引用也是复用的，故data用函数返回一个新的对象
• 小程序 组件或页面使用构造器传参，生成组件（页面）实例，组件复用传参是新对象，故data可以使用对象表达式