Vue 中如何操作 DOM

在 Vue 开发中，虽然提倡使用数据驱动视图的响应式编程方式，但有时我们仍然需要直接操作 DOM。以下将介绍几种在 Vue 中操作 DOM 的常见方法。

一、使用 ref 绑定

在 Vue 组件中，可以通过 ref 来获取 DOM 元素的引用。首先在模板中给需要操作的元素添加一个 ref 属性，例如：

<template>
  <div ref="myDiv">这是一个需要操作的 div</div>
</template>

<script setup>
import { ref } from 'vue';

const myDiv = ref(null);

// 在需要的时候获取并操作 DOM
const handleClick = () => {
  myDiv.value.style.color ='red';
};
</script>

在上述代码中，通过 ref 定义了 myDiv，在模板中引用。在 handleClick 方法里，通过 myDiv.value 就能获取到对应的 DOM 元素，进而操作其样式。

二、使用生命周期钩子函数

Vue 的生命周期钩子函数为我们提供了在特定阶段操作 DOM 的机会。例如 mounted 钩子函数，在组件挂载完成后调用，此时 DOM 已经渲染到页面上，可以进行操作。

<template>
  <div id="target">这是目标元素</div>
</template>

<script>
export default {
  mounted() {
    const target = document.getElementById('target');
    target.textContent = '内容已被修改';
  }
};
</script>

不过需要注意，这种方式直接使用 document.getElementById 等原生 DOM 操作方法，违背了 Vue 的数据驱动原则，在实际项目中尽量少用。

三、自定义指令

如果需要对 DOM 进行一些复用性的操作，可以通过自定义指令来实现。

<template>
  <input v-focus />
</template>

<script setup>
import { defineDirective } from 'vue';

const focus = defineDirective({
  mounted(el) {
    el.focus();
  }
});
</script>

上述代码定义了一个 v-focus 自定义指令，在 mounted 钩子函数中让绑定该指令的元素获取焦点。

在 Vue 中操作 DOM 有多种方式，每种方式都有其适用场景。我们应根据具体需求，在遵循 Vue 核心原则的基础上，灵活选择合适的方法来实现 DOM 操作，以构建高效、可维护的前端应用。