Vue3的reactive、ref、toRefs、toRef、toRaw 和 markRaw处理响应式数据区别

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); // 19

ref

ref 用于创建一个响应式的引用对象，它接受一个值作为参数，并返回一个包含value属性的对象。这个value属性是响应式的。

import { ref } from 'vue';

// 创建一个ref类型的响应式数据
const count = ref(0);
console.log(count.value); // 0

// 修改ref的值
count.value++;
console.log(count.value); // 1

toRefs

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); // 19

toRef

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); // 19

toRaw

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); // 21

markRaw

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

总结