深层次响应式

reactive 和 ref 创建的对象都是深层次的，对象的根属性和嵌套属性都是响应式的。

深层次转换是递归地转为响应式，对象里的每个属性访问都将触发代理的依赖追踪，这种性能负担通常这只有在处理超大型数组或层级很深的对象时才比较明显。例如，一次渲染需要访问 100000+ 个属性时，才会变得比较明显。因此，shallowRef 或 shalloReactive 只在少数特定的场景才会使用。

const state = reactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

浅层次响应式

shallowReactive

shallowReactive 创建的响应式对象只在其根属性是响应式的，对所有深层的对象不会做任何的递归深层转换处理，否则和 reactive 没区别。

浅层响应式对深层级属性的访问会很快，但代价是，所有深层的对象视为非响应式的。

const state = shallowReactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

上图中，state.foo.bar 没有发生改变，只有在其他响应式发生了更新，才间接地更新了它的状态。

替换顶级对象失去响应式

对于 reactive 和 shallowReactive，如果替换了顶级对象就会失去响应式：

let state = shallowReactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state = {
    foo: {
      bar: 1000
    },
    foobar: 2000
  };
}

如上图所示，state.foobar 在替换顶级对象之前，一直是有响应式的，但是被替换了之后，就失去了响应式。

需要思考的是，为什么替换了顶级对就失去了响应式，请先阅读 Vue 中的响应性是如何工作的，官方文档给了一个 reactive 和 ref 创建响应式的伪代码，不难看出，reactive 返回了一个 Proxy。在 getter/setter 上加上 Vue 的追踪代码，实现响应式。

一旦这个 Proxy 对象被替换了，就没有了 getter/setter，即失去了响应式。

shallowRef

与 shallowReactive 不同的是，shallowRef 创建的响应式对象顶层属性都不是响应的，就好像是一个普通的对象一样，没有响应式能力。

let state = shallowRef({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state.value = {
    foo: {
      bar: 1000
    },
    foobar: 2000
  };
}

在替换顶层对象之前，点击按钮，state.foo.bar 和 state.foobar 都没有更新，这和 shallowReactive 不同。强制触发浅层 ref 可以使用 triggerRef，具体查看官方文档：triggerRef。

替换顶级对象不会失去响应式

shallowRef 和 ref 创建的响应式对象被替换了之后依旧保留失去响应式能力。

let state = shallowRef({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state.value.foo.bar++;
  state.value.foobar++;

  const replace = {
    foo: {
      bar: state.value.foo.bar
    },
    foobar: state.value.foobar
  };

  state.value = replace;
}