10月30日

1. Vue 组件命名规范

import StatusBar from '../../components/statusBar.vue'

引入的是StatusBar，在<template>中使用这个组件时不应该是<StatusBar />吗？为什么<status-bar/> 也可以？

在 Vue（无论是 Vue 2 还是 Vue 3）中：

你在 <script> 里导入组件并注册（或自动注册）时，
Vue 内部会把组件名从 PascalCase（帕斯卡命名） 转换为 kebab-case（短横线命名）。
在模板中使用时
你可以写：<StatusBar />
也可以是这样写：<status-bar />
Vue 模板编译器在处理时，会自动把 DOM 标签名统一识别为 kebab-case 的形式，所以：
<StatusBar /> 和 <status-bar /> 在渲染时都会被识别成同一个组件。
官方文档推荐使用 kebab-case（短横线命名），更稳定，也更接近 HTML 标签风格。

2. 箭头函数

const showHospColumns = computed(() => {return createInfo.hospitals.map(item => {return { text: item.name, value: item.id }})
})

当箭头函数体只有一行返回值时，可以省略花括号 {} 和 return：

const showHospColumns = computed(() =>createInfo.hospitals.map(item => ({ text: item.name, value: item.id }))
)

注意：({ text: item.name, value: ​​​​​​​item.id}) 外面要加括号
否则 {} 会被解释成函数体，而不是对象字面量。