**一、Component Props**
Props 是父级向子组件传递特定数据的方式，在 Vue 3 组件系统中扮演着核心角色。为了确保类型安全并提升开发体验，Vue 提供了 TypeScript 集成以定义 Prop 的具体类型：
javascript
// 在 .vue 文件或 tsx 文件中的 script 标签内使用 setup 函数及 defineComponent 方法
import { defineComponent } from 'vue';
export default defineComponent({
props: {
// 定义名为 message 的 prop，其值应为字符串类型
message: String,
// 或者更具体的对象类型的Prop声明：
user: {
type: Object as PropType<User>,
required: true,
validator(user) {
return Boolean(user.id && user.name);
}
},
// 使用typescript时可以这样明确指定prop类型:
count: Number as Prop<number>
},
setup(props) {
const displayMessage = () => console.log(props.message);
return {
displayMessage
};
}
});
此处 `message` 被明确规定只能接收字符串作为输入；而 `user` 则需要是一个符合一定结构的对象（例如包含 id 和 name 属性），并且该 Prop 还添加了一个自定义验证器函数来进一步确认传入的数据是否有效；同时展示如何结合 TypeScript 来严格约束 `count` Prop 类型。
**二、Reactive State (setup() function)**
Vue 3 引入了一种新的 Composition API 设计模式——Composition API 主要体现在 `setup()` 函数上，其中我们可以创建具有反应性的 state 对象：
javascript
import { reactive } from 'vue';
export default {
setup() {
// 创建一个reactive的状态对象
const userInfo = reactive<{name: string; age: number}>({
name: '',
age: 0
});
const updateName = (newName: string) => {
(userInfo.name = newName); // 改变userInfo会自动触发视图更新
};
return {
userInfo,
updateName
};
}
};
在这个例子中，我们利用 `reactive()` 函数将普通 JavaScript 对象转换成了可响应式的状态对象 `userInfo` ，当这个对象内部任何属性发生变化的时候，依赖于这些状态变化的相关模板部分都会得到实时刷新。
总结来说，Vue 3 结合 TypeScript 及强大的 Reactivity System 实现了 Props 数据类型检查与精细化管控应用内的状态变更，大大提升了代码质量的同时降低了维护成本，使得开发者能够更加高效地构造大规模应用程序。