为何Vue代码仅在return后紧跟花括号时才能正常运行？

这是**JavaScript的自动分号插入（Automatic Semicolon Insertion, ASI）**机制导致的，和Vue本身无关。

正常代码的解析逻辑 #

正常代码中，return关键字紧跟对象字面量的左大括号，JavaScript会将它们解析为一个整体：

data() {
    return {
        message: 'Hello Vue'
    }
}

此时data()函数正确返回包含message的对象，Vue可以获取该数据并完成模板渲染。

失效代码的解析逻辑 #

当你在return后单独换行时，JavaScript会自动在return末尾插入分号，代码被解析为：

data() {
    return; // JS自动插入分号
    {
        message: 'Hello Vue'
    }
}

这时data()函数的返回值变成了undefined，Vue无法找到message属性，因此模板中的{{ message }}无法被正常渲染。

解决方法 #

• 保持return与对象左大括号在同一行：

  data() {
      return {
          message: 'Hello Vue'
      }
  }
  

• 或用括号包裹对象，避免歧义：

  data() {
      return (
          {
              message: 'Hello Vue'
          }
      )
  }
  

内容的提问来源于stack exchange，提问作者MiSCapu