reactive
reactive 用于创建一个响应式对象。它接受一个普通对象，并返回一个响应式对象（Proxy实例）。
import { reactive } from 'vue';// 创建一个reactive类型的响应式对象
const person = reactive({name: 'panda',age: 18
});console.log(person.name); // panda// 修改reactive对象的属性
person.age++;
console.log(person.age); // 19ref
ref 用于创建一个响应式的引用对象，它接受一个值作为参数，并返回一个包含value属性的对象。这个value属性是响应式的。
import { ref } from 'vue';// 创建一个ref类型的响应式数据
const count = ref(0);
console.log(count.value); // 0// 修改ref的值
count.value++;
console.log(count.value); // 1toRefs
toRefs 用于将一个响应式对象转换为一个包含响应式引用的普通对象，每个ref与原对象的属性一一对应，方便在需要解构响应式对象时保持响应式。
import { reactive, toRefs } from 'vue';// 创建一个reactive对象
const person = reactive({name: 'panda',age: 18
});// 将reactive对象转换为包含ref的普通对象
const { name, age } = toRefs(person);console.log(name.value); // panda
console.log(age.value); // 18// 通过ref修改值，会影响到原始的reactive对象
name.value = 'Sam';
age.value++;console.log(person.name); // Sam
console.log(person.age); // 19toRef
toRef用于创建一个ref，它与响应式对象的属性建立关联，使得对ref的操作会反映到原始对象的属性上，反之亦然。
import { reactive, toRef } from 'vue';// 创建一个reactive对象
const person = reactive({name: 'panda',age: 18
});// 创建一个与person.age关联的ref
const ageRef = toRef(person, 'age');console.log(ageRef.value); // 18// 通过ageRef修改值，会影响到person.age
ageRef.value++;
console.log(person.age); // 19toRaw
toRaw 用于获取响应式对象背后的原始对象。如果对象不是响应式的，则返回它本身。
import { reactive, toRaw } from 'vue';// 创建一个reactive对象
const reactiveObj = reactive({name: 'panda',age: 20
});// 获取原始对象
const rawObj = toRaw(reactiveObj);console.log(rawObj === reactiveObj); // false// 修改原始对象的属性，会影响到响应式对象
rawObj.age = 21;
console.log(reactiveObj.age); // 21markRaw
markRaw标记一个对象，使其在被转换为响应式对象时被忽略，Vue 会跳过对其进行响应式处理
import { reactive, markRaw } from 'vue';// 创建一个普通对象
const normalObj = {name: '李四',age: 30
};// 标记为原始对象
const markedObj = markRaw(normalObj);// 创建响应式对象，包含被标记的原始对象
const reactiveObj = reactive({info: markedObj
});// 修改原始对象属性，不会触发响应式更新
markedObj.age = 31;
console.log(reactiveObj.info.age); // 30// 直接修改响应式对象中的被标记对象，也不会触发响应式更新
reactiveObj.info = { name: '王五', age: 32 };
console.log(reactiveObj.info.age); // 30总结
| 名称 | 描述 | 数据类型 | 响应式 | 与原始数据关系 | 更新视图时机 | Vue版本 |
|---|---|---|---|---|---|---|
| ref | 为数据添加响应式状态，返回一个具有响应式状态的副本 | 基本类型（string、number、boolean、symbol等）及对象 | 是 | 拷贝（对于基本类型）；若传入对象，则自动转为reactive处理 | 数据改变后立即更新 | Vue 3 |
| reactive | 为对象数据添加响应式状态，返回一个具有响应式状态的副本 | 对象 | 是 | 引用关系，修改响应式数据会影响原始数据 | 数据改变后立即更新 | Vue 3 |
| toRef | 将某个对象中的属性变成响应式数据，保持与源对象属性的响应式连接 | 对象属性 | 是 | 引用关系，修改响应式数据会影响原始数据 | 数据改变后等待下次更新 | Vue 3 |
| toRefs | 将响应式对象转换为普通对象，其中每个属性都是指向原始对象相应属性的ref | 响应式对象 | 是 | 引用关系，改变结果数据的值也会同时改变原始数据 | 数据改变后等待下次更新 | Vue 3 |
| toRaw | 将响应式对象转换为其原始数据格式 | 响应式对象 | 否 | 返回原始数据，断开响应式连接 | 不适用 | Vue 3 |
| markRaw | 将一个对象标记为非响应式，使其不再被Vue的响应式系统追踪 | 普通对象 | 否 | 标记为非响应式，Vue不再追踪其变化 | 不适用 | Vue 3 |