Vue3---(3)ref,reactive,toRefs,toRef

ref

作用： 定义响应式变量。
语法： let name= ref('测试')。
返回值： 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
注意点：
- JS中操作数据需要：name.value，但模板中不需要.value，直接使用即可。
- 对于let name = ref('测试')来说，name不是响应式的，name.value是响应式的。
- 其实ref接收的数据可以是：基本类型 、对象类型。
- 若ref接收的是对象类型，内部其实也是调用了reactive函数。

xml 复制代码

<template>
  <div>
    <h1>姓名：{{name}}</h1>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
let name = ref('测试')

</script>

reactive

作用： 定义一个响应式对象 （基本类型不要用它，要用ref，否则报错）
语法： let 响应式对象= reactive(源对象)。
返回值： 一个Proxy的实例对象，简称：响应式对象。
注意点： reactive定义的响应式数据是"深层次"的。

xml 复制代码

<template>
  <div>
    <h1>姓名：{{people.name}}</h1>
    <h1>年龄：{{people.age}}</h1>
  </div>
</template>
<script setup lang="ts">
import {reactive} from 'vue'
let people = reactive({name:'测试',age:18})

</script>

ref和reactive区别

定义数据类型

ref :基本数据类型(如 string、number、boolean),对象数据类型(如数组,对象)

reactive: 对象数据类型

使用区别

ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

编辑

实际使用过程中, 一个基本类型的响应式数据，必须使用ref ,对象层级不深ref,reactive两者都行,层级比较多一般用reactive(实际可以ref一把梭,就是代码里面.value比较多,看起来不美观)

toRefs和toRef

作用：将一个响应式对象中的每一个属性，转换为ref对象。常用于解构时保持响应式。
备注：toRefs与toRef功能一致，但toRefs可以批量转换。

xml 复制代码

<template>
  <div>
    <h1>姓名：{{people.name}}</h1>
    <h1>年龄：{{people.age}}</h1>
  </div>
</template>
<script setup lang="ts">
import {reactive} from 'vue'
let people = reactive({name:'测试',age:18})
// 通过toRefs 将people中的多个属性取出,并保持响应式能力
let {name,age} = toRefs(people)
// 通过toRef 将people中的某个属性取出,并保持响应式能力
let age = toRef(people,'age')
</script>

面试重点

为什么ref要用.value

基本数据类型 ：ref 包装的基本数据类型（如数字、字符串）并不直接是一个对象，它们是原始值。因此，ref 使用 .value 来访问或修改实际的值。

包装行为 ：ref 是为了让 Vue 追踪这些数据的变化并保持响应式，使用 .value 是 Vue 设计的一部分，用来明确区分原始值和响应式对象。

为什么reactive不使用.value

reactive 是通过 代理对象 来实现响应式的。reactive 返回的是一个 代理对象，当你访问对象的属性时，代理会处理 getter 和 setter 操作来实现响应式。

这种方式是 Vue 3 中的 Proxy API 工作机制的体现，因此不需要 .value，可以直接访问对象的属性。