Vue 如何操作 DOM 节点

在 Vue 开发中，虽然提倡使用数据驱动视图的方式，但在某些特定场景下，我们仍需要直接操作 DOM 节点。下面就来探讨一下 Vue 操作 DOM 节点的方法。

在 Vue 中可以使用 ref 来获取 DOM 节点的引用。在模板中，给需要操作的 DOM 元素添加一个 ref 属性，例如 <div ref="myDiv">这是一个 div</div>。然后在 Vue 组件的 setup 函数里，通过 ref 来接收这个引用。

import { ref } from 'vue';
export default {
    setup() {
        const myDiv = ref(null);
        const handleClick = () => {
            console.log(myDiv.value);
        };
        return {
            myDiv,
            handleClick
        };
    }
};

这里通过 myDiv.value 就可以访问到对应的 DOM 节点，进而对其进行各种操作，如修改样式、获取或修改节点的属性等。

另外，$el 也是一种获取 DOM 节点的方式。在基于选项的 API 中，this.$el 指向当前组件的根 DOM 元素。比如在一个组件中：

export default {
    mounted() {
        console.log(this.$el);
    }
};

在 mounted 钩子函数里，this.$el 就是该组件渲染后的根 DOM 节点。

还有一种情况是操作子组件的 DOM 节点。如果子组件是一个自定义组件，我们可以在父组件中通过 ref 来获取子组件实例，然后再访问子组件内部的 DOM 节点。例如：

<template>
    <ChildComponent ref="childRef" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
export default {
    components: { ChildComponent },
    setup() {
        const childRef = ref(null);
        const handleClick = () => {
            console.log(childRef.value.$el);
        };
        return {
            childRef,
            handleClick
        };
    }
};
</script>

在子组件 ChildComponent.vue 里正常定义模板和逻辑即可。

不过，在 Vue 中尽量避免过度操作 DOM 节点，因为这可能会破坏 Vue 的响应式原理和虚拟 DOM 的优势。只有在确实必要的情况下，比如操作第三方插件、实现一些特殊交互效果时，才使用上述方法来操作 DOM 节点。掌握这些操作 DOM 节点的技巧，能让我们在 Vue 开发中更加灵活地应对各种需求。