在 Vue 3 项目中,你可以在 .vue
文件和单独的 .ts
文件中定义变量。这两种方式有一些关键的区别:
在
.vue
文件中定义变量
-
局部作用域:
- 在
.vue
文件的<script setup>
或<script>
标签中定义的变量,它们的作用域仅限于当前组件。
- 在
-
响应式系统:
- 使用
<script setup>
时,可以直接使用 Composition API,定义的变量默认是响应式的,可以利用 Vue 的响应式系统。
- 使用
-
模板访问:
- 在
.vue
文件中定义的变量可以直接在模板中使用,无需额外的export
。
- 在
-
编译时处理:
- 变量和逻辑都在编译时被处理,可以利用 Vue 的优化,如树摇(tree-shaking)。
-
单文件组件:
.vue
文件是单文件组件(SFC)的一部分,方便管理和维护。
在引用的
.ts
文件中定义变量
-
模块作用域:
- 在
.ts
文件中定义的变量是模块作用域的,可以通过export
和import
在不同的文件之间共享。
- 在
-
类型检查:
.ts
文件支持 TypeScript,可以提供类型检查和自动补全等特性。
-
重用性:
- 在
.ts
文件中定义的变量或函数可以在多个组件之间重用,提高了代码的可维护性和可重用性。
- 在
-
非响应式:
- 默认情况下,
.ts
文件中定义的变量不是响应式的,除非你明确地使用 Vue 的响应式 API(如ref
或reactive
)。
- 默认情况下,
-
编译时处理:
.ts
文件需要通过 TypeScript 编译器处理,然后才能被 Vue 编译器处理。
-
模块系统:
.ts
文件遵循 JavaScript 的模块系统,可以定义模块、导出和导入。
在
.vue
文件中定义变量更适合组件内的局部状态和逻辑,而.ts
文件更适合定义跨组件共享的状态、工具函数、类型定义等。在 Vue 3 中,推荐使用 Composition API 和<script setup>
语法,这样可以更简洁地组织组件逻辑,同时享受 TypeScript 的类型检查和 Vue 的响应式系统。