场景一：移动端表单验证后自动聚焦

在手机端用户注册场景中，当用户提交表单后发现手机号格式错误，需要快速定位到输入框并弹出虚拟键盘。传统方式在Vue中直接操作DOM可能引发渲染时序问题。

javascript复制
// 组合式API实现方案
import { ref, onMounted } from 'vue'

}
}

场景二：动态列表项样式批量修改

电商平台商品筛选场景，需要根据用户选择高亮匹配的多个商品卡片。当需要同时操作多个相同class元素时，推荐使用组合式查询方案：

html运行复制

<div 
  v-for="item in goodsList" 
  :key="item.id"
  :ref="el => { if(item.isSelected) selectedItems.push(el) }"
  class="goods-card"
>
  {{ item.name }}
div>

javascript复制
// 选项式API批量操作
methods: {
  highlightSelected() {
    const cards = this.$refs.selectedItems
    cards.forEach(el => {
      el.style.border = '2px solid #ff0033'
      el.style.transform = 'scale(1.02)'
    })
  }
}

场景三：可视化图表尺寸自适应

在数据看板场景中，Echarts图表容器需要根据父元素尺寸动态调整。此时推荐使用ResizeObserver配合ref实现响应式监听：

javascript复制
// 组合式API实现自适应
import { ref, onMounted, onBeforeUnmount } from 'vue'

}
}

方法对比指南（移动端优先）

最佳实践总结

• 优先使用refs + $el模式，符合Vue响应式设计理念
• 涉及第三方DOM库时，在onMounted生命周期初始化
• 批量操作使用ref回调函数存储DOM引用
• 移动端避免同步DOM操作，使用CSS Transforms提升性能
• 复杂场景配合nextTick确保DOM更新完成