Vue.js 中的 ref 属性：深入解析与最佳实践

在 Vue.js 开发中，我们经常需要访问 DOM 元素或子组件实例，以便进行一些特定的操作。这时，ref 属性就派上了用场。本文将深入解析 Vue.js 中 ref 属性的作用、用法和最佳实践，帮助你更好地理解和运用它。

什么是 ref 属性？

ref 是 Vue.js 提供的一个特殊的 attribute，用于在组件实例中注册 DOM 元素或子组件实例的引用。通过 ref 注册的元素或组件实例，可以在父组件中通过 this.$refs（Vue 2）或响应式 ref 引用（Vue 3）进行访问。

简单来说，ref 就像一个“标签”，可以让你在组件树中快速找到特定的元素或组件。

ref 属性的作用

ref 属性主要有以下几个作用：

访问 DOM 元素： 当 ref 绑定到一个普通的 HTML 元素上时，例如 <div ref="myDiv"></div>，this.$refs.myDiv 或 myDiv.value（Vue 3）将会指向该 DOM 元素。你可以通过这个引用直接操作 DOM 元素，例如获取元素的尺寸、焦点控制、手动触发事件等。
访问子组件实例： 当 ref 绑定到一个子组件上时，例如 <MyComponent ref="myComponent"></MyComponent>，this.$refs.myComponent 或 myComponent.value（Vue 3）将会指向该子组件的 Vue 实例。你可以通过这个引用调用子组件的方法、访问子组件的数据等。

ref 属性的用法

Vue 2 中的用法

在 Vue 2 中，你可以直接在模板中使用 ref 属性：

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="focusInput">聚焦输入框</button>
    <MyComponent ref="myComponent"></MyComponent>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus(); // 聚焦输入框
    },
    someMethod() {
      this.$refs.myComponent.doSomething(); // 调用子组件的方法
    }
  },
  mounted() {
    console.log(this.$refs.myInput); // 访问 DOM 元素
    console.log(this.$refs.myComponent); // 访问子组件实例
  }
}
</script>

Vue 3 中的用法

在 Vue 3 中，推荐使用 ref 函数来创建响应式引用，并在模板中使用该引用：

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="focusInput">聚焦输入框</button>
    <MyComponent ref="myComponent"></MyComponent>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  setup() {
    const myInput = ref(null);
    const myComponent = ref(null);

    const focusInput = () => {
      myInput.value.focus(); // 聚焦输入框
    };

    const someMethod = () => {
      myComponent.value.doSomething(); // 调用子组件的方法
    };

    onMounted(() => {
      console.log(myInput.value); // 访问 DOM 元素
      console.log(myComponent.value); // 访问子组件实例
    });

    return {
      myInput,
      myComponent,
      focusInput,
      someMethod
    }
  }
}
</script>

展开

注意：

在 Vue 3 的 setup 函数中，你需要使用 ref() 函数来创建响应式引用，并在模板中通过 .value 访问引用的值。
确保在组件挂载完毕后才能访问 this.$refs 或响应式 ref 引用，通常在 mounted 生命周期钩子中使用。

ref 属性的最佳实践

谨慎使用 ref： Vue 提倡通过数据驱动视图，尽量避免直接操作 DOM 元素。只有在必要的情况下才使用 ref。
避免过度使用 ref： 过度使用 ref 会使代码变得难以理解和维护。尽量将逻辑封装在组件内部，通过 props 和 events 进行组件间的通信。
使用唯一的 ref 值： ref 的值必须是唯一的，否则会发生覆盖。
在组件挂载后访问 ref： 确保在组件挂载完毕后才能访问 this.$refs 或响应式 ref 引用。
Vue 3 推荐使用响应式 ref： 在 Vue 3 中，推荐使用 ref() 函数来创建响应式引用，而不是直接使用 this.$refs。