為什麼 JS 用 PascalCase (大駝峰命名)，而 Vue 語法中卻用 kebab-case (短橫線 - 分隔) 呢？

為什麼 JS 用 PascalCase (大駝峰命名)，而 Vue 語法中卻用 kebab-case (短橫線 - 分隔) 呢？ (#3571)

例如：

// main.js
app.component('FoodItem', FoodItem')

// App.vue
<template>
  <h1> Food</h1>

  <food-item/>
  <food-item/>
</template>

原因是

JS 有區分大小寫， PascalCase (大駝峰命名) 好辨認且是 convension
HTML 標籤名稱不分大小寫 (Case-insensitive)，所以像 <FoodItem> 在瀏覽器中的 DOM 會被解析成 <fooditem>，這樣會導致 Vue 無法正確識別。