Vue 3 的 `defineProps`/`defineEmits` 为什么能提升性能？

AI摘要生成中

会员AI生成，仅供参考

1. 消除运行时开销 (Zero Runtime Overhead)

• 传统方式：在 Vue 2 或 Vue 3 的非 <script setup> 模式下，定义 props 和 emits 通常需要一个对象配置（如 props: { ... }）或在 setup() 函数中调用辅助函数。这些对象和函数调用在运行时是真实存在的，需要被解析和执行。
• 宏方式：defineProps 和 defineEmits 在编译后完全消失。编译器会将它们的参数直接转换为组件选项对象（Component Options Object）中的 props 和 emits 字段。
  • 结果：生成的代码中没有任何关于 defineProps 或 defineEmits 的函数调用，减少了运行时的函数执行栈和对象创建开销。

2. 避免不必要的代理包装 (Optimized Reactivity)

• 精准响应式：在 <script setup> 中，defineProps 返回的对象是经过高度优化的。Vue 知道这些属性是来自父组件的 props，因此不需要像普通 reactive 对象那样进行深度的递归代理（Deep Proxy）。
• 只读优化：编译器明确知道 props 是只读的（子组件不应直接修改），因此在底层实现上可以应用特定的优化策略，避免不必要的依赖追踪更新检查，从而提升渲染效率。

3. 更小的打包体积 (Smaller Bundle Size)

• 无导入需求：因为它们是由编译器处理的宏，所以你不需要从 'vue' 中导入它们（如果导入了，构建工具甚至会报警告）。
• 代码精简：编译后的代码不包含这些宏的定义代码，也不包含为了支持这些宏而存在的运行时 shim 代码。这使得最终生成的 JavaScript 文件体积更小，加载和解析速度更快。

4. 静态分析与类型推导 (Static Analysis & Type Inference)

• TS 类型擦除：当使用 TypeScript 配合 defineProps<Type>() 时，类型信息仅在编译期用于校验和生成声明文件（.d.ts）。在生成的 JavaScript 代码中，这些类型信息会被完全擦除，不会有任何运行时类型检查的开销（除非你显式写了 runtime validation）。
• 编译器优化机会：由于编译器在编译时就能完全静态地分析出 props 和 emits 的结构，它可以更好地进行树摇（Tree-shaking）和其他静态优化。

代码对比示例

1<script setup>
2// 编译器宏：无需导入，编译时处理
3const props = defineProps({
4  msg: String,
5  count: { type: Number, default: 0 }
6});
7
8const emit = defineEmits(['update', 'close']);
9</script>

1export default {
2  props: {
3    msg: String,
4    count: { type: Number, default: 0 }
5  },
6  emits: ['update', 'close'],
7  setup(__props, { emit }) {
8    // props 已经是处理好的响应式对象，直接可用
9    const props = __props; 
10    // ... 其余逻辑
11  }
12};

总结