Vue.js中export default语法疑问：该结构是什么？data为何无属性名？

1. 代码的类型 #

这段代码里export default后面跟着的是一个JavaScript对象，它是Vue组件的配置对象，通过ES模块的export default语法被导出，作为当前模块的默认内容。

2. 为什么data看起来没有属性名？ #

这是ES6对象字面量的简写语法，完整的写法是：

data: function() {
  return {}
}

当对象的属性名和要赋值的函数名称一致时，可以省略:和function关键字，直接写成data () {}的形式，本质上还是给这个对象的data属性绑定了一个函数。

3. 整个语法的运作逻辑 #

• export default：是ES模块的导出语法，作用是把这个配置对象设为当前文件的默认导出内容，其他文件可以通过import语句直接导入这个组件配置，用来创建Vue组件实例。
• Vue处理这个配置对象的逻辑：
  • name: 'my-component'：给组件设置一个唯一标识，在组件递归调用、Vue Devtools调试时会用到这个名称。
  • data () { return {} }：data必须是一个函数（确保每个组件实例都拥有独立的数据源，避免多个实例共享同一份数据），它返回的对象就是组件的响应式数据，组件渲染时会依赖这些数据，当数据发生变化时，Vue会自动更新对应的DOM内容。

内容的提问来源于stack exchange，提问作者vladimir.gorea