在 Vue 中，有哪些方式可以获取子组件实例或子元素？请说明各自的使用场景和注意事项。
考察说明
考查对 Vue 组件间引用和 DOM 访问机制的理解。
回答思路
- 【回答框架 1】在 Vue 中，访问子组件实例或子元素主要通过 ref 属性实现。在模板中给子组件或元素添加 ref 属性，然后在父组件中通过 this.$refs.xxx 访问。对于子组件，$refs 返回的是组件实例，可以调用其方法或访问其数据；对于普通元素，返回的是 DOM 元素。
- 【回答框架 2】使用 ref 时需注意：ref 在组件渲染完成后才可用，因此在 created 生命周期中无法访问，应在 mounted 或之后使用。此外，当 v-for 中使用 ref 时，$refs 会返回一个数组，而不是单个实例。
- 【回答框架 3】另一种方式是使用 $children 属性，但 Vue 3 中已移除，Vue 2 中也不推荐，因为它不保证顺序且与组件结构耦合。更推荐使用 ref 或 provide/inject 进行显式通信。
- 【回答框架 4】对于子元素，除了 ref，还可以使用原生 DOM 查询方法如 document.querySelector，但应避免直接操作 DOM，除非必要。Vue 的响应式系统应优先用于数据驱动视图更新。
- 【回答框架 5】在 Vue 3 组合式 API 中，使用 ref 获取子组件实例时，需在子组件中通过 defineExpose 暴露需要访问的属性或方法，否则父组件无法访问子组件内部数据。
- 【关键点 1】ref 是访问子组件实例或子元素的主要方式，在 mounted 后可用。
- 【关键点 2】v-for 中的 ref 会返回数组。
- 【关键点 3】Vue 3 中 $children 已移除，推荐使用 ref 和 defineExpose。
- 【关键点 4】避免直接操作 DOM，优先使用响应式数据。
- 【易错点 1】在 created 中访问 ref 会得到 undefined。
- 【易错点 2】Vue 3 中未使用 defineExpose 暴露的属性无法通过 ref 访问。
- 【易错点 3】过度使用 ref 可能导致组件耦合，应优先使用 props 和事件通信。