vue3中shallowReactive和shallowRef的区别？

Question

vue3中shallowReactive和shallowRef的区别？哪些是shallowRef可以做的shallowReactive不能做的？

shallowReactive总是用于对象，为什么对象需要shallowRef。

Answer 1

ref用于跟踪单个值，而reactive用于跟踪对象或数组。这对版本的影响shallow是，shallowRef只有在自身发生变化时才会触发侦听器value，并且shallowReactive只会在第一级值上触发（因此直接键）

我希望这是一个例子来说明行为之间的差异。

上的电抗变化reactive可以shallowReacive通过观察watch

refshallowRef当使用 a 时，其行为方式相同，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>