Vue 3 学习笔记之 $refs：揭秘响应式引用背后的秘密

Vue 3 学习笔记之 $refs：揭秘响应式引用背后的秘密

引言
在 Vue.js 中，refs 是一个强大的工具，它允许我们在 JavaScript 中访问组件实例和 DOM 元素。在 Vue 3 中，refs 的使用方式与 Vue 2 有了一些变化，本篇笔记将深入探索这些变化，并揭秘 $refs 响应式引用的背后机制。

一、$refs 在 Vue 2 中的使用
在 Vue 2 中，我们通过 ref 属性为组件或 DOM 元素设置一个引用，然后可以在组件实例中通过 this.$refs.refName 来访问该引用。例如：

<template>
  <div ref="myDiv">
    我是 myDiv
  </div>
</template>

<script>
export default {
  methods: {
    focusMyDiv() {
      this.$refs.myDiv.focus();
    }
  }
};
</script>

在上面的示例中，我们将 ref 属性设置为 "myDiv"，并在组件方法 focusMyDiv 中使用 this.$refs.myDiv 来访问 <div> 元素，并调用其 focus() 方法。

二、$refs 在 Vue 3 中的变化
在 Vue 3 中，$refs 的使用方式有了两个主要变化：

1. ref 属性的新语法 ：在 Vue 3 中，ref 属性不再支持字符串形式，而是需要使用一个特殊的符号 ref。例如：

<template>
  <div ref={myDiv}>
    我是 myDiv
  </div>
</template>

<script>
export default {
  methods: {
    focusMyDiv() {
      this.$refs.myDiv.focus();
    }
  }
};
</script>

2. **refs 的响应性** ：在 Vue 2 中，refs 不是响应式的，这意味着当组件更新时，refs 的值不会自动更新。在 Vue 3 中，refs 变成了响应式的，这意味着当组件更新时，$refs 的值也会自动更新。

三、$refs 的正确姿势
为了正确使用 $refs，我们需要遵循以下几点原则：

1. 使用 ref 属性 ：在组件或 DOM 元素上使用 ref 属性来设置一个引用。
2. **在组件实例中访问 refs** ：在组件实例中，可以通过 `this.refs.refName` 来访问相应的引用。
3. 注意响应性 ：在 Vue 3 中，refs 是响应式的，这意味着当组件更新时，refs 的值也会自动更新。

四、$refs 的使用场景
$refs 在 Vue 中有很多使用场景，包括：

1. 访问子组件 ：可以通过 $refs 来访问子组件的实例，从而进行通信和数据共享。
2. 访问 DOM 元素 ：可以通过 $refs 来访问 DOM 元素，从而进行操作和样式控制。
3. 实现拖拽 ：可以通过 $refs 来实现拖拽功能，从而创建交互式应用程序。

总结
refs 是 Vue 中一个强大的工具，它允许我们在 JavaScript 中访问组件实例和 DOM 元素。在 Vue 3 中，refs 的使用方式与 Vue 2 有了一些变化，但其核心原理仍然相同。掌握 $refs 的正确使用姿势，可以帮助我们编写出更强大和灵活的 Vue 组件。