一、defineOptions

在 TypeScript 项目中，defineOptions() 会自动推断类型：

<script setup lang="ts">
// TypeScript 会自动推断选项类型
defineOptions({
  name: 'MyComponent', // ✅ 类型安全
  inheritAttrs: false  // ✅ 类型安全
})
</script>

1️⃣ 合理使用组件名称
为每个组件设置一个有意义的名称，便于调试和开发工具识别。

// ✅ 推荐：使用描述性的名称
defineOptions({ name: "UserProfileCard" });
 
// ❌ 避免：使用无意义的名称
defineOptions({ name: "Component1" });

2️⃣ 谨慎配置 inheritAttrs
只在确实需要自定义属性传递行为时才禁用 inheritAttrs。

// ✅ 推荐：当需要自定义属性传递时
defineOptions({ inheritAttrs: false });
 
// ❌ 避免：不必要的配置
defineOptions({ inheritAttrs: true }); // 默认值，无需声明

二、ref()声明组件中的ref值(queryFormRef)

在 Vue 中，用 ref() 声明 queryFormRef 是为了获取对 <el-form> 组件的实例引用，从而调用组件提供的内置方法（如表单验证、重置等）。这是 Vue 3 组合式 API 中操作 DOM 或组件实例的标准方式。

具体原因：

1. 获取组件实例，调用内置方法Element Plus 的 <el-form> 组件提供了很多实用方法（如 validate 验证表单、resetFields 重置表单等）。通过 ref() 声明的 queryFormRef，可以访问这些方法：

<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
 <el-form-item label="关键字" prop="keywords">
  <el-input v-model="queryParams.keywords" placeholder="用户名/昵称/手机号" clearable 
    @keyup.enter="handleQuery"/></el-form-item>
</el-form>


const queryFormRef = ref();

// 验证表单
queryFormRef.value.validate((valid) => {
  if (valid) { /* 表单验证通过 */ }
});

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  fetchData();
}

1. 建立模板与逻辑的关联模板中 <el-form ref="queryFormRef"> 的 ref 属性值与逻辑中 ref() 声明的变量名一致，Vue 会自动将组件实例挂载到 queryFormRef.value 上，实现模板与逻辑的绑定。

2. 符合 Vue 3 组合式 API 的规范在 Vue 3 组合式 API 中，ref() 是用于声明响应式变量或DOM / 组件引用的核心 API。对于非响应式的组件引用，ref() 会创建一个包装对象，通过 .value 访问实际内容，这是 Vue 3 为了统一响应式机制设计的。

三、ts中声明变量

const userInfo = ref<UserInfo>({} as UserInfo);

• const userInfo：声明一个常量 userInfo，用于存储用户信息。
• ref<UserInfo>()：
  • ref 是 Vue3 提供的用于创建响应式数据的 API，适用于基本类型和对象类型。
  • <UserInfo> 是 TypeScript 的泛型语法，指定 ref 内部值的类型为 UserInfo（这是一个自定义接口 / 类型，用于描述用户信息的结构）。
• {} as UserInfo：
  • {} 创建一个空对象。
  • as UserInfo 是 TypeScript 的类型断言，强制将空对象的类型指定为 UserInfo（解决空对象与 UserInfo 类型不匹配的问题）。