Vue 中如何获取 dom？

在 Vue 中获取 DOM 通常应该避免直接操作 DOM，因为 Vue 推崇的是数据驱动视图，直接操作 DOM 有可能绕过 Vue 的响应式系统，导致代码难以维护和出现意料之外的问题。然而，有时候确实需要获取 DOM 元素，比如操作原生事件或调用一些不可避免的 DOM API。

在 Vue 中获取 DOM 有几种方式：

1. 通过 ref 属性： 在模板中使用 ref 给元素命名，并通过 this.$refs 来访问。

<template>
  <div ref="myElement">Hello</div>
</template>

<script>
export default {
  mounted() {
    // 获取 DOM 元素
    const element = this.$refs.myElement;
    // 对 DOM 元素进行操作或赋值
  }
};
</script>

2. 使用 document.getElementById() 等原生 DOM 方法： 直接使用原生 JavaScript 获取 DOM。

<script>
export default {
  mounted() {
    // 获取 DOM 元素
    const element = document.getElementById('myElement');
    // 对 DOM 元素进行操作或赋值
  }
};
</script>

需要注意的是，直接操作 DOM 可能违反了 Vue 的响应式原则，应该尽量避免这样做。优先考虑使用 Vue 的数据驱动方式来操作视图，仅当必要时才使用上述方法获取 DOM 元素。