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

总结

名称	描述	数据类型	响应式	与原始数据关系	更新视图时机	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

原文地址：https://blog.csdn.net/m0_72030584/article/details/145033498

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！