vue3shallowReactive与shallowRef

1、概念

●shallowReactive:只处理对象内最外层属性的响应式，也就是浅响应式。 ●shallowRef:只处理value的响应式, 不进行对象的reactive处理。 ●什么时候用浅响应式呢? ○一般情况下使用ref和reactive即可。 ○如果一个对象数据, 结构比较深, 但变化时只是外层属性变化使用shallowReactive。 ○如果一个对象数据, 后面会产生新的对象来替换使用shallowRef。

2、示例代码

<template> <h2>shallowReactive和shallowRef{ m1 }}{ m2 }}{ m3 }}{ m4 }} defineComponent, reactive, ref, shallowReactive, shallowRef, } from "vue"; export default defineComponent({ name: "App", setup() { // 深度劫持(深监视)----深度响应式 const m1 = reactive({ name: "鸣人", age: 20, car: { name: "奔驰", color: "red", }, }); // 浅劫持(浅监视)----浅响应式 const m2 = shallowReactive({ name: "鸣人", age: 20, car: { name: "奔驰", color: "red", }, }); // 深度劫持(深监视)----深度响应式----做了reactive的处理 const m3 = ref({ name: "鸣人", age: 20, car: { name: "奔驰", color: "red", }, }); // 浅劫持(浅监视)----浅响应式 const m4 = shallowRef({ name: "鸣人", age: 20, car: { name: "奔驰", color: "red", }, }); const update = () => { // 更改m1的数据---reactive方式 // m1.name += '==' // m1.car.name += '==' // 更改m2的数据---shallowReactive // m2.name += '==' // m2.car.name += '===' // 更改m3的数据---ref方式 // m3.value.name += '===' // m3.value.car.name += '===' // 更改m4的数据---shallowRef方式 // m4.value.name += '===' // m4.value.name += '===' console.log(m3, m4); }; return { m1, m2, m3, m4, update, }; }, });