vue3中shallowReactive和shallowRef的区别？ shallowRef 能做什么而 shallowReactive 不能做什么？
shallowReactive 总是用于对象，为什么对象需要 shallowRef。
最佳答案
ref 用于跟踪单个值，而 reactive 用于跟踪对象或数组。这在 shallow 版本上的含义是 shallowRef 只会在 value 本身发生变化时触发监听器，并且 shallowReactive 只会在第一级值上触发(所以直接键)
这里有一个例子，我希望它能说明行为之间的差异。
reactive 和 shallowReacive 的响应变化可以通过 watch 观察
ref 和 shallowRef 在使用 watch 时表现相同，但对象对模板。
const s1 = Vue.shallowRef({ x: 1, y: { a: 1 } });
const r1 = Vue.ref({ x: 1, y: { a: 1 } });
const s2 = Vue.shallowReactive({ x: 1, y: { a: 1 } });
const r2 = Vue.reactive({ x: 1, y: { a: 1 } });
Vue.watch(r1, () => console.log("ref (obj) changed"));
Vue.watch(s1, () => console.log("shallowRef (obj) changed"));
Vue.watch(s2, () => console.log("shallowReactive changed"));
Vue.watch(r2, () => console.log("reactive changed"));
setTimeout(() => {
console.log("=== update shallow object ===");
r1.value.x = 2;
s1.value.x = 2;
s2.x = 2;
r2.x = 2;
}, 1000);
setTimeout(() => {
console.log("=== update nested y.a values ===");
r1.value.y.a = 2;
s1.value.y.a = 2;
s2.y.a = 2;
r2.y.a = 2;
}, 2000);
var app1 = Vue.createApp({
data() {
return { r1 };
},
}).mount("#app1");
var app2 = Vue.createApp({
data() {
return { s1 };
},
}).mount("#app2");<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>
<div id="app1">
<pre>ref: {{JSON.stringify(r1, null, 0)}}</pre>
</div>
<div id="app2">
<pre>shallow: {{JSON.stringify(s1, null, 0)}}</pre>
</div>https://stackoverflow.com/questions/66222469/