浅层ref

# 题目:

首先来看到这个题目的描述，这里说的是我们要使用响应式 API: shallowRef，来使得 state.value.count = 2 能够触发 watch 回调。

# 方法一分析:

shallowRef 我们看到官方文档，响应式进阶这里，可以看到这句话，和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。

# 方法一解决:

const state = shallowRef({ count: 1 });

watch(
  state,
  () => {
    console.log("State.count Updated");
  },
  { deep: true }
);

state.value = { count: 2 };

由于内部值原样存储和暴露，那么第一个方式就是我们可以从原样去更改来使其触发。

# 方法二分析:

但还有另一个方式，让我们看到 triggerRef 这个 api，可以强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。通俗来讲就是哪怕是浅层的，修改内部属性值，也能强制触发副作用也就是 watch。

# 方法二解决:

const state = shallowRef({ count: 1 });

watch(
  state,
  () => {
    console.log("State.count Updated");
  },
  { deep: true }
);

state.value.count = 2;
triggerRef(state);

所以这里用了 triggerRef 这个 api 将浅层 ref 声明的 state，强制触发它的副作用，所以这里 watch 是生效的。

← watch 全家桶依赖注入→