Vue中如何获取DOM元素？

在Vue应用中，我们通常优先通过数据驱动来操作视图。但在某些场景下，直接访问或操作特定的DOM元素仍然是必要的，例如管理焦点、触发原生动画、集成第三方库。Vue为此提供了两种主要方式：模板引用（ref）和生命周期钩子。

使用模板引用（ref）

ref是Vue中用于获取DOM元素或组件实例的最直接、最推荐的方式。你可以通过在模板元素或组件上添加ref属性，并在JavaScript中通过this.$refs对象（选项式API）或对应的ref变量（组合式API）来访问它。

<template>
  <input ref="usernameInput" type="text">
  <button @click="focusInput">聚焦输入框</button>
</template>

<script>
// 选项式API
export default {
  methods: {
    focusInput() {
      this.$refs.usernameInput.focus();
    }
  }
}
</script>

在Vue 3的组合式API中，你需要先使用ref函数创建一个响应式引用，并通过模板中同名的ref属性进行绑定。

<script setup>
import { ref, onMounted } from 'vue';
const usernameInput = ref(null);
onMounted(() => {
  usernameInput.value.focus();
});
</script>
<template>
  <input ref="usernameInput" type="text">
</template>

需要注意的是，在组件挂载完成之前（mounted或onMounted生命周期），$refs或ref变量可能还是null，因为它们对应的DOM元素还未被创建。

在生命周期钩子中访问

确保DOM元素可用的最安全时机是在mounted生命周期钩子（选项式API）或onMounted钩子函数（组合式API）中。此时组件已经挂载到DOM，你可以安全地执行依赖于DOM的操作。

// 选项式API
export default {
  mounted() {
    const el = this.$refs.myDiv;
    console.log(el.clientWidth);
  }
}

// 组合式API
import { onMounted, ref } from 'vue';
const myDiv = ref(null);
onMounted(() => {
  console.log(myDiv.value.clientWidth);
});

与第三方库集成

直接操作DOM的一个典型场景是集成非Vue的JavaScript库（如图表库、地图SDK）。你可以在mounted钩子中获取DOM元素引用，并将它传递给第三方库进行初始化。

<script>
import Chart from 'some-chart-library';
export default {
  mounted() {
    const canvas = this.$refs.chartCanvas;
    this.chart = new Chart(canvas, { /* 配置 */ });
  },
  beforeUnmount() {
    this.chart.destroy(); // 清理，防止内存泄漏
  }
}
</script>
<template>
  <canvas ref="chartCanvas"></canvas>
</template>

总之，虽然Vue鼓励数据驱动，但它也通过ref提供了访问底层DOM的能力。合理使用这项能力，可以让你在处理需要直接DOM交互的特殊需求时游刃有余。记住，操作完成后，尤其是在组件销毁前，要做好必要的清理工作。