Vue 3 中 ref 与 toRef/toRefs 的区别

2023-09-13 17:58:59

响应式数据管理神器：揭秘 Vue 3 中的 ref、toRef 和 toRefs

在 Vue 3 中，ref、toRef 和 toRefs 是用于管理响应式数据的强大工具。这些工具虽然用途相近，但在使用方式和适用场景上存在差异。本文将深入探讨它们的异同，帮助你充分理解和利用这些工具。

ref：直接操纵 DOM 和对象

ref 是一种将 DOM 元素或 JavaScript 对象包装成响应式对象的函数。它通过在组件模板中使用 ref 属性来应用：

<template>
  <input v-model="message" ref="messageInput" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    focusInput() {
      // 访问响应式 DOM 元素
      this.$refs.messageInput.focus()
    }
  }
}
</script>

通过这种方式，可以访问 DOM 元素并对其进行操作，例如聚焦输入框。

toRef 和 toRefs：打造响应式 JavaScript 对象

toRef 和 toRefs 用于创建响应式 JavaScript 对象：

const obj = {
  name: 'John',
  age: 30
}

const nameRef = toRef(obj, 'name')
const ageRef = toRef(obj, 'age')

// 响应式数据
console.log(nameRef.value) // 'John'
console.log(ageRef.value) // 30

toRefs 则将整个对象转换为响应式对象：

const refs = toRefs(obj)
console.log(refs.name.value) // 'John'
console.log(refs.age.value) // 30

区别：用途、创建方式和响应性

用途： ref 用于管理 DOM 元素或 JavaScript 对象，而 toRef 和 toRefs 专门用于管理 JavaScript 对象。
创建方式： ref 通过 ref 属性创建，而 toRef 和 toRefs 通过函数调用创建。
响应性： ref 创建的响应式对象直接指向 DOM 元素或 JavaScript 对象，而 toRef 和 toRefs 创建的响应式对象是原始对象的代理。

适用场景：灵活选择，提升效率

ref：
- 需要直接访问 DOM 元素或 JavaScript 对象，例如聚焦输入框或触发自定义事件。
- 需要动态创建响应式元素或对象。
toRef 和 toRefs：
- 需要响应式地访问 JavaScript 对象的属性。
- 需要在组件之间共享响应式对象。
- 需要创建可观测的 JavaScript 对象。