透视Vue3：巧用ref、toRef和toRefs，玩转你的响应式数据

前端

2024-01-07 14:35:11

响应式数据处理的利器：Vue3中的ref、toRef和toRefs

响应式数据是Vue3的核心

在Vue3中，响应式数据是至关重要的，它使组件能够动态地响应数据变化。ref、toRef和toRefs是Vue3提供的强大工具，可以帮助我们高效地处理响应式数据。

1. ref：从组件模板获取数据

什么是ref？

ref允许我们从组件模板中获取元素或组件的引用。这使我们能够访问其属性和方法，以实现交互和数据操作。

如何使用ref？

有两种使用ref的方法：字符串引用和函数引用。

字符串引用： 将ref作为字符串传递给HTML元素，然后在组件中使用this.refName来获取引用。
函数引用： 将ref作为函数传递给组件，然后在组件中使用this.refName()来获取引用。

代码示例：

<template>
  <input ref="inputRef" />
</template>

<script>
  export default {
    setup() {
      const inputRef = ref(null);
      return {
        inputRef,
      };
    },
  };
</script>

2. toRef：将响应式属性转换为可变值

什么是toRef？

toRef可以将响应式属性转换为可变值。这意味着我们可以在不影响原始响应式属性的情况下对其副本进行修改。

如何使用toRef？

将响应式属性作为参数传递给toRef即可。

代码示例：

import { ref, toRef } from 'vue';

const count = ref(0);
const countRef = toRef(count);
countRef.value++;
console.log(count.value); // 输出：1

3. toRefs：将响应式对象转换为可变对象

什么是toRefs？

toRefs与toRef类似，但它可以将响应式对象转换为可变对象。这使我们可以在不影响原始响应式对象的情况下对其副本进行修改。

如何使用toRefs？

将响应式对象作为参数传递给toRefs即可。

代码示例：

import { ref, toRefs } from 'vue';

const user = ref({
  name: 'John',
  age: 30,
});
const userRefs = toRefs(user);
userRefs.name.value = 'Jane';
console.log(user.value.name); // 输出：Jane