Vue 3 中 ref 属性详解：操作 DOM 元素的利器

news2024/11/19 13:40:46

Vue 3 中 `ref` 属性详解：操作 DOM 元素的利器

在 Vue 3 中，ref 属性不仅可以用于声明响应式数据，还可以直接绑定到模板中的 DOM 元素。通过这种方式，开发者可以在组合式 API 中高效、直接地操作 DOM 元素。本文将详细讲解 Vue 3 中标签元素中的 ref 属性及其相关知识点，并结合语法糖提供丰富的代码示例。

什么是 `ref` 属性？

在 Vue 3 中，ref 属性是一种将模板中的 DOM 元素或组件实例绑定到 JavaScript 变量的方法。通过 ref 属性，可以轻松访问和操作这些绑定的元素或组件。

当 ref 被绑定到模板中的某个元素时，Vue 会在组件实例的 setup 函数中提供对该元素的直接引用。

如何使用 `ref` 属性？

在模板中使用 ref 属性绑定元素：
使用 ref 属性为 DOM 元素或组件指定一个引用名。
```
<template>
  <div ref="myDiv">这是一个绑定了 ref 的元素</div>
</template>
```

在 setup 函数中通过 ref 访问：
在组合式 API 中，导入 Vue 的 ref，即可获取绑定的 DOM 元素。

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

const myDiv = ref(null); // 用于绑定 DOM 元素

onMounted(() => {
  console.log('DOM 元素:', myDiv.value);
});
</script>

绑定 DOM 元素：基础用法

ref 属性最常见的用途是绑定原生 DOM 元素，获取并操作 DOM 节点。

示例：获取元素并修改样式

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

const myDiv = ref(null); // 绑定 DOM 元素

onMounted(() => {
  // 修改 DOM 样式
  if (myDiv.value) {
    myDiv.value.style.color = 'blue';
    myDiv.value.style.fontSize = '20px';
  }
});
</script>

<template>
  <div ref="myDiv">Hello Vue 3!</div>
</template>

在上面的例子中，myDiv.value 是对应的 DOM 元素引用，我们可以直接使用原生 DOM API 操作它。

绑定子组件实例

除了绑定原生 DOM 元素，ref 还可以绑定到子组件实例，从而调用组件的公共方法或访问其内部数据。

示例：访问子组件实例方法

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const childRef = ref(null);

const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.sayHello();
  }
};
</script>

<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<!-- Child.vue -->
<script setup>
import { ref } from 'vue';

const sayHello = () => {
  console.log('Hello from Child Component!');
};
</script>

<template>
  <div>我是子组件</div>
</template>

在 `v-for` 中使用 `ref`

当 ref 用在 v-for 中时，返回的 ref 是一个包含所有绑定元素的数组或对象。

示例：获取多个元素

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

const items = ['Item 1', 'Item 2', 'Item 3'];
const itemRefs = ref([]);

onMounted(() => {
  console.log('所有绑定的元素:', itemRefs.value);
});
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" :ref="el => itemRefs.value[index] = el">
      {{ item }}
    </li>
  </ul>
</template>

动态绑定 `ref`

如果需要动态为不同的元素绑定 ref，可以使用回调函数形式的 ref。

示例：动态设置 `ref`

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

const dynamicRef = ref(null);

const setRef = (el) => {
  dynamicRef.value = el;
};

const logElement = () => {
  console.log('绑定的元素:', dynamicRef.value);
};
</script>

<template>
  <div>
    <div ref="setRef">动态绑定的元素</div>
    <button @click="logElement">查看绑定的元素</button>
  </div>
</template>

销毁阶段清理 `ref`

绑定的 ref 在组件销毁时会被自动清理，无需手动处理。不过，如果涉及到全局事件监听等操作，还是需要在 onUnmounted 中手动清理。

示例：清理全局事件监听

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

const myDiv = ref(null);

const handleClick = () => {
  console.log('全局点击事件触发');
};

onMounted(() => {
  if (myDiv.value) {
    window.addEventListener('click', handleClick);
  }
});

onUnmounted(() => {
  if (myDiv.value) {
    window.removeEventListener('click', handleClick);
  }
});
</script>

<template>
  <div ref="myDiv">清理全局事件的示例</div>
</template>

注意事项

访问时机：
- ref 的绑定只有在 DOM 元素或组件实例挂载后（即 onMounted 钩子中）才可访问。
- 在 setup() 中直接访问时，ref.value 为 null。
兼容性：
- Vue 3 的 ref 属性在组合式 API 中表现优越，但在使用选项式 API 时需要额外注意访问方式的差异。
避免过度依赖：
- 使用 ref 直接操作 DOM 应仅限于必要场景。对于大多数交互，优先使用 Vue 的响应式特性和指令（如 v-model 和 v-bind）。