标签: Vue

本文介绍了在Vue 3 + TypeScript项目中，使用`vue-tsc -b`进行类型检查的最佳实践。针对多包/大型项目，`vue-tsc -b`支持Project References构建模式，实现依赖顺序编译和增量构建。对于单体应用，建议使用`vue-tsc --noEmit`进行类型检查。

`watch` 和 `watchEffect` 都是 Vue 框架中用于监听数据变化的 API。`watch` 默认不立即执行，且仅在新旧值不同时触发，可深度监听。`watchEffect` 则会立即执行并追踪依赖，任何依赖的 setter 被调用都会触发执行，即使新旧值相同。

`tabIndex`影响焦点控制与可访问性。浏览器通过焦点树、DOM顺序和`tabIndex`决定焦点顺序。`tabIndex`可强制聚焦、调整顺序或排除元素。实践中需关注动态内容焦点管理、可访问性增强。避免滥用`tabIndex>0`，利用React、Vue框架及axe-core等工具优化焦点管理，构建无障碍体系。

使用 `vue-tsc --build` 和 `composite` 优化 TypeScript 构建：启用 `composite` 和 `incremental` 可实现增量编译，仅编译修改部分。结合项目引用，可在多模块项目里高效构建并管理依赖。`vue-tsc` 支持 Vue 单文件组件，需配置 `rootDir` 和 `outDir`。避免随意删除 `.tsbuildinfo` 或使用 `--force`。

WebStorm 对 Vue LSP 的识别存在问题，可能导致在 monorepo 中出现误判。此外，Vue LSP 2.x 版本可能因缺失 `watchFiles` 方法而启动失败。解决方案为手动升级 LSP 到最新版本，通过 npm 安装 `@vue/language-server@latest` 和 `@volar/language-server@latest`。