【vue3|第7期】 toRefs 与 toRef 的深入剖析

日期：2024年6月6日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

---

一、前言

在 Vue3 的响应式系统中，toRefs 和 toRef 是两个非常有用的工具函数，它们用于将响应式对象的属性转换为单独的响应式引用。在本文中，我们将探讨这两个函数的联系与区别，并了解它们在实际开发中的应用场景。

二、toRefs

toRefs 函数用于将一个响应式对象的所有属性转换为单独的响应式引用。这个函数通常与解构赋值一起使用，以便我们可以轻松地访问响应式对象的每个属性。

1、使用场景

假设我们有一个响应式对象 state，包含 name 和 age 两个属性：

const state = reactive({name: 'Commas',age: 18
});

现在我们想解构这个对象，并保持每个属性的响应式。这时，toRefs 就派上用场了：

const { name, age } = toRefs(state);

这样，name 和 age 就成为了单独的响应式引用，我们可以直接使用它们，而不必担心失去响应式。

2、响应式维护

toRefs 创建的 refs 是对原始对象的“浅拷贝”，因此在操作这些refs时需要小心，以免影响到原始对象的响应性。

三、toRef

toRef 函数用于为源响应式对象的某个属性创建一个响应式引用。与 toRefs 不同的是，toRef 只能用于单个属性。

1、使用场景

假设我们有一个响应式对象 state，包含 name 和 age 两个属性。现在我们只想为 name 属性创建一个响应式引用：

const name = toRef(state, 'name');

这样，name 就成为了 state.name 的响应式引用。我们可以直接修改 name.value，这个修改会反映到 state.name 上。

2、响应式维护

toRef 创建的 ref 是对特定属性的直接引用，它不会影响到原始对象的响应性结构。

四、联系与区别

• toRefs 和 toRef 都用于创建响应式引用。
• toRefs 用于将整个响应式对象的所有属性转换为响应式引用，而 toRef 只用于单个属性。
• toRefs 通常与解构赋值一起使用，方便同时访问多个属性，而 toRef 用于为单个属性创建响应式引用。

五、结论

在 Vue3 中，toRefs 和 toRef 是非常有用的工具函数，它们可以帮助我们更好地处理响应式数据。了解它们的联系与区别，可以帮助我们更灵活地应用它们，提高开发效率。

---

参考文章：

• Vue.js

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139485667