Vue3 ref 和 reactive

Vue3 ref 和 reactive

概述

• ref函数：
  • 接收简单类型或者对象类型的数据传入并返回一个响应式的对象。
  • 支持数据类型：
    • 基本数据类型：数字、字符串、布尔值。
    • 对象类型：对象、数组、函数。内部会自动通过reactive实现响应式。
    • null、undefined。
  • 在script标签中操作需要通过.value属性获取值和修改值，在模板中可以直接读取。
  • 返回值是Ref类型。
• reactive函数：
  • 接受对象类型数据的参数传入并返回一个响应式的对象。
  • 支持数据类型：对象、数组。
  • 可以使用toRefs()函数和toRef()函数解构数据，解构出的值是Ref类型。
• 使用原则：
  • 若需要一个基本类型的响应式数据，必须使用ref()。
  • 若需要一个响应式对象，层级不深，那么使用ref()也可以。
  • 若需要一个响应式对象，且层级较深，要深度跟踪，那么使用reactive()。

使用

对比

• 都是用于处理响应式数据。
• 不同点：
  • reactive不能处理简单类型的数据。
  • ref参数类型支持较好，但必须通过.value访问修改。
  • ref函数内部的实现依赖于reactive函数。