当前位置：首页 > article >正文

深入理解 Vue 中的 `ref`

article 2025/3/6 11:42:38

深入理解 Vue 中的 `ref`

在 Vue.js 开发中，ref 是一个重要且常用的功能。它不仅可以帮助开发者访问模板中的 DOM 元素，还能用来操作子组件，甚至在 Vue 3 中引入了响应式引用的概念，让 ref 的功能更加强大。本篇文章将全面介绍 ref 的基本概念、原理以及使用场景。

什么是 `ref`？

定义

ref 是 Vue 提供的一个特性，用来引用模板中的 DOM 元素或组件实例，或者在 Vue 3 中创建一个响应式引用。通过 ref，我们可以在 JavaScript 代码中直接与这些对象交互。

作用

访问模板中的 DOM 元素。
操作子组件的实例（方法或状态）。
在 Vue 3 中创建响应式变量，存储任意数据。

`ref` 的使用场景

1. 访问 DOM 元素

通过 ref，可以轻松获取模板中某个 DOM 元素的引用，从而直接操作它。以下是一个简单的例子：

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

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 输出 DOM 元素
  },
};
</script>

2. 操作子组件实例

ref 可以用于获取子组件实例，从而调用组件中的方法或访问其公开的属性。

<template>
  <child-component ref="child"></child-component>
  <button @click="updateChild">Update Child</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  methods: {
    updateChild() {
      this.$refs.child.someMethod(); // 调用子组件方法
    },
  },
};
</script>

3. 在 Vue 3 中创建响应式变量

Vue 3 引入了 ref API，用于创建响应式变量，并在模板中使用它。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

`ref` 的原理解析

Vue 2 中的 `ref`

在 Vue 2 中，ref 通常用于获取 DOM 元素或组件实例。这些引用存储在 this.$refs 对象中。你可以通过 this.$refs.refName 来访问它们。

this.$refs.myDiv; // 获取 DOM 节点
this.$refs.child; // 获取组件实例

Vue 3 中的 `ref`

Vue 3 中的 ref 是响应性系统的一部分。本质上，它是一个包含单个值的响应式对象，通过 .value 来存储和访问值。

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用
count.value = 10; // 修改值并触发视图更新

在模板中，Vue 会自动解包 ref 的值，因此可以直接使用 {{ count }}，而不需要写成 {{ count.value }}。

Vue 3 的 `expose` 提升封装性

在 Vue 3 中，默认情况下通过 ref 获取到的组件实例不会暴露其所有方法和属性。通过 expose，我们可以显式指定要暴露的内容。

import { ref, expose } from 'vue';

export default {
  setup(_, { expose }) {
    const message = ref("Hello");
    const changeMessage = (newMsg) => (message.value = newMsg);

    expose({ changeMessage }); // 仅暴露 changeMessage 方法
    return { message };
  },
};

父组件中：

const childRef = ref(null);
const updateChild = () => {
  childRef.value.changeMessage("Updated Message!");
};

这种设计使得组件更加封装，避免外部直接访问其私有状态。

使用 `ref` 的注意事项

避免滥用 ref
- 应优先使用 Vue 的数据绑定、事件监听等特性。
- 仅在必要时使用 ref，如操作 DOM 或调用组件的公共方法。
生命周期
- Vue 2 的 $refs 在 mounted 钩子后可用。
- Vue 3 的 DOM 引用也需要在 onMounted 或 onUpdated 中使用。
限制性
- ref 不支持动态绑定到条件性渲染的元素。
- 如果多个元素具有相同的 ref 名称，$refs 会返回一个数组。

示例：结合 DOM 操作

以下是一个使用 ref 操作 DOM 的例子：

<template>
  <div ref="box" style="width: 100px; height: 100px; background: red;"></div>
  <button @click="changeColor">Change Color</button>
</template>

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

export default {
  setup() {
    const box = ref(null);

    const changeColor = () => {
      if (box.value) {
        box.value.style.background = 'blue';
      }
    };

    return { box, changeColor };
  },
};
</script>