1、首先defineprops，定义在setup函数中的props声明与组件全局声明不同，setup函数内部的defineProps宏函数能够直接使用，无需导入这是因为setup函数在运行时，已经被Vue环境自动加载，因此在其中使用defineProps是直接可用的其次，若在非setup顶层使用defineProps，会报错，提示defineProps is not defined这是因为非setup。
2、Vue 3 的 Script Setup 语法引入defineprops了 definePropsdefineEmitsdefineExposewithDefaults 的编译器宏然而某些情况下，ESLint 会报错以上编译器宏函数未定义本文将介绍两种解决方案来解决这个问题假定defineprops你的项目使用 VueCli 进行初始化若版本在 v800 以上，跳转到 Step 2，否则直接到 Step。
3、Vue3中引入自动注册子组件的语法，无需在components中显式注册引入的组件，代码执行时系统会自动完成注册在setup script写法中，属性和方法无需明确返回，系统自动将其封装为响应式数据，直接使用即可setup语法糖新增了三个APIdefineProps用于子组件接收父组件传来的props，defineEmits用于子组件调用父组。
4、Vue3项目开发中，为细化模块功能，常将一个模块拆分为多个小组件，如弹窗Form表单等然而，组件间的数据传递不可避免，此时父子组件通信就显得尤为重要父传子数据传递在父组件中，通过使用子组件并传递message变量，实现数据给子组件的传递子组件通过defineProps方法接收这些数据示例代码如下父。
5、在Vue3中实现父子组件间传参，主要涉及三种方式父传子子传父以及利用vmodel实现父子间数据双向传递在父传子的场景中，父组件通过自定义属性向子组件发送数据，子组件则通过props接收值得注意的是，与Vue2相比，Vue3中引入子组件时无需注册，直接使用即可，子组件通过`defineProps`方法接收父组件。
6、interfacePropsfoostringbar？number对defineProps的响应性解构默认值会被编译为等价的运行时选项constfoo，bar=100=definePropsltProps引入接口定义importPropsfrom#39otherfile#39不支持definePropsltProps虽然可以单独定义interface，而且可以给整体props设置类型约束，但是只能。
7、利用setup语法糖，开发者可以将组件的逻辑和状态完全分离，通过在script标签上添加setup，无需再通过setup函数进行return操作，简化了代码结构，使代码逻辑更加清晰在Props的使用上，通过定义Props，我们可以通过defineProps接收组件传入的参数此函数内置，无需额外引入设置默认值时，使用withDefaults可以便捷。
8、1 betterDefine 支持引入类型尽管 Vue3 从 33 版本开始解决了 props 不支持外部类型引入的问题，但通过 Macros 提供的 betterDefine 功能，开发者仍能使用更灵活的类型定义，增强代码的可读性和类型安全2 $defineProps 使 props 可以直接解构在 Vue3 中，props 通常不能直接解构，这可能导致。
9、首先，推荐使用组合式 API，这相较于 Vue2 的选项式 API 更加灵活和强大在 Vue3 中，开发者无需再区分 methods 和 data，而是通过 reactive 和 ref 对象进行数据管理在处理 props 和 emits 时，Vue3 提供了更简洁的语法，通过 `defineProps` 和 `defineEmits` 直接定义组件的属性和事件处理。
10、在 Vue3 结合 TypeScript 开发项目时，应遵循以下基础开发规范以提升代码质量和开发效率推荐使用组合式 API相较于 Vue2 的选项式 API，组合式 API 更加灵活和强大使用 reactive 和 ref 对象进行数据管理，无需再区分 methods 和 data处理 props 和 emits通过 defineProps 和 defineEmits。
11、props在setup中，子组件在接收props时，需要借助defineProps，这是一个只能在setup语法中才能使用的API我们先来看看标准的写法，props是如何接收的标准写法 parentvuelttemplateltchildcount=countlttemplateimpordefineComponent，reffrom#39vue#39importchildfrom#39childComponent#39exportdefault。
12、宏与语法糖在Vue3中是两种不同的概念，它们均使用形式类似函数调用，区别在于宏不需要通过模块导入，且编译期被转换成原生JavaScript代码语法糖则创建了新的语法，宏为现有语法赋予了新含义setup函数是本质，definePropsdefineEmitsdefineExpose等宏是在编译期间将代码转换为setup函数。
13、lttemplatemsgcountlthellocommsg=quot1234quotlthellocomlttemplateimportdefineProps，reffrom#39vue#39importHelloComfrom#39hellovue#39definePropsmsgStringconstcount=ref0constaddCount==countvalue++ 子组件 lttemplatemsglttemplateimportdefinePropsfrom#39vue#39。
14、只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得如下因为没有了setup函数，那么props，emit，attrs怎么获取呢 setup script语法糖提供了新的API来供我们使用 defineProps #。
15、首先，setup返回语句部分主要判断了使用的是templateinlineTemplate还是render函数对于常规template，我们进入了第一部分逻辑，返回的`returned`包含了变量函数类等，但不包括definePropsdefineEmits和defineExpose这些特殊处理对于inline或render函数的处理，虽然重要，但这里暂且不表，留待后续章节在`。
16、因为没有了setup函数，那么props，emit，attrs怎么获取呢 setupscript语法糖提供了新的API来供我们使用 defineProps？用来接收父组件传来的props？defineEmits？用来声明触发的事件父组件 template ？mysonfoo=quotquot@change=quotchildClickquot template scriptlang=quottsquotsetup importMySonfromquotMySonvuequot。
17、给对象添加多个属性并分别指定它们的配置 ObjectdefinePropertiesobj， propsObjectkeys 返回一个由给定对象的自身 可枚举属性 组成的数组，不包括原型链上的可枚举属性 Objectvalues 返回一个由给定对象的自身 可枚举属性值 组成的数组，不包括原型链上的可枚举属性值 fori。
