面试题：Vue 中怎么获取 DOM 节点？

在 Vue 中获取 DOM 节点有几种常见方法，以下是常用的方式：

1. 使用 `ref` 属性

Vue 提供了 ref 属性，可以直接在模板中标记一个元素或组件，然后通过 this.$refs 在 JavaScript 中访问。

<template>
  <div>
    <div ref="myElement">这是一个 DOM 元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取 DOM 节点
    const element = this.$refs.myElement;
    console.log(element); // 输出 DOM 元素
  }
}
</script>

2. 使用原生 JavaScript 方法

你也可以使用原生 JavaScript 的方法，如 document.getElementById、document.querySelector 等来获取 DOM 节点。

<template>
  <div>
    <div id="myElement">这是一个 DOM 元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 使用原生 JavaScript 获取 DOM 节点
    const element = document.getElementById('myElement');
    console.log(element); // 输出 DOM 元素
  }
}
</script>

3. 使用 `$el` 属性

如果你需要获取组件根元素的 DOM 节点，可以使用 this.$el。

<template>
  <div>
    <div>这是一个 DOM 元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取组件根元素的 DOM 节点
    const rootElement = this.$el;
    console.log(rootElement); // 输出根元素的 DOM 节点
  }
}
</script>

4. 使用 `vnode.elm`

在某些高级场景中，你可以通过 vnode.elm 获取 DOM 节点，但这种方式通常不推荐在常规开发中使用。

<template>
  <div>
    <div>这是一个 DOM 元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 通过 vnode.elm 获取 DOM 节点
    const element = this.$vnode.elm;
    console.log(element); // 输出 DOM 元素
  }
}
</script>