Vue 3 中的 ref 完全指南

Vue 3 中的 ref 完全指南

Vue 3 引入了 Composition API，其中 ref 是关键的一部分。ref 可以让我们更方便地在组件中定义响应式数据，在模板中使用

解释：

• count 是响应式的，当 count.value 更新时，

  {{ count }}

  会自动重新渲染。
• 在模板中直接使用 count 时，Vue 会自动解析 .value，无需手动调用 count.value。

2. 响应式数据的双向绑定

ref 常用于实现双向绑定，比如将表单输入的内容实时绑定到变量中：

解释：

• v-model 指令会自动绑定输入值到 username 变量，并且每次输入内容变化时，Vue 会自动更新视图中的展示值。

---

三、 ref 与复杂数据类型

1. 对象类型的 ref

ref 不仅可以定义基本类型数据，还可以定义对象类型。我们可以直接修改对象内部的属性，Vue 会自动监听并更新。

注意：虽然 user 是一个对象，但仍需要通过 user.value 访问其属性。

2. 数组类型的 ref

当 ref 定义数组时，可以直接使用数组的修改方法（如 push、pop 等），Vue 会响应式地跟踪数组内容的变化。

在这个例子中，Vue 会监听 tasks 数组的变化，每次调用 addTask 方法时，新的任务会自动添加到列表中并显示在页面上。

---

四、ref 在 DOM 中的应用

1. 获取 DOM 元素的引用

在 Vue 3 中，可以通过 ref 获取 DOM 元素的引用，这样可以更灵活地操作 DOM 元素。

解释：

• inputRef 是一个 DOM 引用，通过 绑定到具体的输入框。
• 当点击按钮时，focusInput 方法会聚焦到输入框。

2. 监听 DOM 元素的变化

在某些场景下，我们可能需要在 DOM 元素变化时获取最新的高度、宽度等属性，可以结合 ref 和 Vue 的 onMounted 钩子实现。

解释：

• boxRef 用来引用 .box 元素。
• onMounted 钩子在组件挂载后执行，获取并输出方块的高度。

---

五、toRefs 与 reactive 的结合

ref 更适合管理单一数据，而如果我们有多个属性的对象需要响应式管理，通常会使用 reactive。当我们希望在组合 API 中把 reactive 对象的属性暴露到模板中时，可以使用 toRefs 将 reactive 转换为 ref。

示例：

---

六、总结

• 定义响应式数据：ref 用于定义基本数据类型和复杂数据类型的响应式数据。
• 双向绑定：ref 变量可以通过 v-model 实现表单的双向绑定。
• DOM 引用：使用 ref 获取并操作 DOM 元素。
• 与 reactive 结合：在需要处理多个属性的对象时，建议使用 reactive 和 toRefs 组合。

ref 是 Vue 3 响应式系统中的核心工具，通过熟练掌握 ref，可以在 Vue 开发中更加灵活地实现数据绑定和界面交互。