Vue3中ref、toRef、toRefs与reactive有何具体差异？

本文共计1373个文字，预计阅读时间需要6分钟。

目录：

一、ref定义任意类型响应式数据

二、reactive定义响应式对象

三、toRef将一个reactive转换为一个ref

四、toRefs将多个reactive自动解构为多个ref

一、ref定义任意类型响应式数据

二、reactive定义响应式对象

三、toRef将一个reactive转换为一个ref

四、toRefs将多个reactive自动解构为多个ref

目录

• 一、ref——定义任意类型响应式数据
• 二、reactive——定义响应式对象
• 三、toRef——将一个 reactive 转化为一个 ref
• 四、toRefs——将多个 reactive 自动解构为多个 ref

一、ref——定义任意类型响应式数据

• ref 能定义“任何类型”的响应式数据（ref 在 vue3 中指响应式数据）。
• 参数可以传入任意数据类型。
• 使用 ref 定义的属性必须通过 .value 的形式才能修改其值。属性的值一旦被修改就会触发模板的重新渲染以显示最新的值。
• 对于在 setup 返回的 refs（return 出的对象里的属性），因为在模板中访问它们时，它们会被自动浅解包，所以在 template 中使用时无需加 .value。