vue3学习日记(十九)：组件实例详解

Vue3 组件实例详解

Vue3 的组件实例是 Vue 应用的核心构建块，通过 defineComponent 或 Composition API 创建。组件实例包含以下关键特性：

• Props：父组件向子组件传递数据。
• Emits：子组件向父组件触发事件。
• Slots：内容分发机制，支持默认插槽和作用域插槽。
• Reactive State：通过 ref 或 reactive 创建响应式数据。
• Lifecycle Hooks：如 onMounted、onUpdated 等，用于控制组件生命周期行为。

使用场景

动态表单构建
通过组合式 API 动态生成表单字段，利用 v-model 实现双向绑定，适合需要灵活配置的表单场景。

状态共享
通过 provide/inject 跨层级传递状态，避免多余的 prop 传递，适用于深层嵌套组件。

异步加载
结合 Suspense 组件和异步 setup，实现懒加载或数据获取时的占位显示。

注意事项

响应式数据解构
直接解构 reactive 对象会丢失响应性，需使用 toRefs 转换：

const state = reactive({ count: 0 });
const { count } = toRefs(state); // 保持响应性

生命周期执行顺序
Composition API 的钩子（如 onMounted）在选项式 API 的 beforeCreate 之后执行，混合使用时需注意时序问题。

模板引用时机
通过 ref 获取 DOM 或子组件实例时，需确保在 onMounted 后访问，否则可能为 null。

总结与建议

性能优化

• 使用 shallowRef 或 shallowReactive 减少非必要响应式开销。
• 对复杂计算属性使用 computed 缓存结果。

代码组织

• 将逻辑拆分到自定义 Hook 中，提高复用性。
• 使用 <script setup> 语法简化代码，减少样板代码。

类型安全

• 为 Props 和 Emits 添加 TypeScript 类型定义，增强代码可维护性：

interface Props {title: string;
}
const props = defineProps<Props>();