vue3 根据自定义属性查找dom

Vue3 中提供了两种方式用于根据自定义属性查找DOM。

第一种方式是通过使用 `ref` 和 `$refs`。我们可以在模板中使用 `ref` 定义一个引用名，然后在对应的Vue实例中通过 `$refs` 访问该引用名。通过 `$refs` 可以直接获取到对应的DOM元素，然后就可以查找自定义属性了。例如，在模板中定义一个自定义属性`data-id`，代码如下：

<template>
  <div ref="myDiv">
    <div data-id="123">...</div>
  </div>
</template>

然后在Vue实例中可以通过 `$refs` 获取到 `myDiv` 这个引用名对应的DOM元素，并在其中查找自定义属性为 `data-id` 的DOM元素，代码如下：

export default {
  mounted() {
    const myDiv = this.$refs.myDiv; // 获取引用名为`myDiv`对应的DOM元素
    const myEle = myDiv.querySelector('[data-id="123"]'); // 查找自定义属性为`data-id`、值为`123`的DOM元素
    // 其他逻辑...
  },
};

第二种方式是使用 `querySelector` 或 `querySelectorAll` 方法直接在DOM上进行查找。这种方式需要在Vue实例中手动访问DOM元素，并在其中查找自定义属性。例如，在Vue实例中通过`querySelector`方式查找自定义属性为 `data-id` 的DOM元素，代码如下：

export default {
  mounted() {
    const myEle = document.querySelector('[data-id="123"]'); // 查找自定义属性为`data-id`、值为`123`的DOM元素
    // 其他逻辑...
  },
};

需要注意的是，这种方式需要在Vue组件中手动处理DOM相关的逻辑，可能会引发其他问题，所以使用时需要谨慎。