uniapp平替document.querySelector

### 实现 `document.querySelector` 功能

在 UniApp 中，由于框架基于 Vue.js 并针对多端环境进行了优化，因此直接使用原生 JavaScript DOM API 如 `document.querySelector` 不再适用。为了实现相同的功能，可以利用 Vue 提供的选择器机制以及组件化开发模式。

#### 使用 Refs 获取元素

Vue 推荐的方式是通过 `ref` 属性来标记特定的 HTML 元素或子组件实例，在父级组件中可以通过 `$refs` 来访问这些被标记的对象：

<template>
  <view ref="myElement">这是一个需要操作的视图</view>
</template>

<script>
export default {
  mounted() {
    const element = this.$refs.myElement;
    console.log(element); // 输出对应的DOM节点或组件实例
  }
}
</script>

这种方式不仅限于单个元素的选择，也适用于更复杂的场景，比如当页面加载完成时给某个元素绑定触摸移动事件[^1]。

对于多个同类型元素的操作需求，则可以在循环渲染列表项时动态分配唯一的 `ref` 名称，并借助计算属性或其他逻辑处理手段收集所有目标对象。

#### 利用 Selectors 库

如果确实存在复杂的选择条件无法仅靠 `ref` 解决的情况，也可以考虑引入第三方库如 [selector](https://github.com/chemerisuk/better-scroll/blob/master/docs/api/selectors.md)，它能够在一定程度上模拟标准浏览器环境下 CSS Selector 的行为，不过需要注意的是这可能会增加应用体积并影响性能表现，应谨慎评估必要性和成本效益比率后再做决定[^2]。