在 Vue 框架中，有哪些方式可以获取到页面上的 DOM 节点？请说明各自的使用场景和注意事项。
考察说明
考查对 Vue 中 DOM 访问机制的理解，包括模板引用和编程式查询的适用场景。
回答思路
- 【回答框架 1】Vue 中获取 DOM 节点的主要方式是通过模板引用（ref）。在模板中给元素或组件添加 ref 属性，然后在组合式 API 中通过 ref 变量访问，或在选项式 API 中通过 this.$refs 访问。ref 在组件挂载后填充，在卸载时置空。
- 【回答框架 2】对于组件上的 ref，获取到的是组件实例，而非底层 DOM 元素。若需访问组件根元素，可通过组件实例的 $el 属性，但依赖组件结构，不推荐在父组件中直接操作子组件 DOM。
- 【回答框架 3】另一种方式是使用原生 DOM 查询方法，如 document.querySelector，但这种方式绕过了 Vue 的响应式系统，可能导致操作与视图状态不同步，且不利于组件封装和测试，仅在特殊场景（如集成第三方库）下使用。
- 【回答框架 4】在 v-for 循环中，ref 会成为一个数组，但顺序不保证与数据源一致，且当列表动态变化时需谨慎处理。建议在需要操作单个节点时，使用函数式 ref 或通过事件参数获取目标元素。
- 【关键点 1】模板 ref 是 Vue 官方推荐的 DOM 访问方式，在挂载后可用。
- 【关键点 2】组件 ref 获取的是组件实例，访问 DOM 需通过 $el，但应避免跨组件操作。
- 【关键点 3】原生查询方法会脱离响应式系统，应限制使用场景。
- 【关键点 4】v-for 中的 ref 是数组，顺序不保证，需注意动态列表。