ref，shallowRef，reactive，shallowReactive 的区别

1. reactive 与 shallowReactive 的区别

• reactive: 如果属性的值是一个 ref ，那么直接改变属性的值或者 ref 的值，都会影响另外一个值（will unwrap all the deep refs）。

• shallowReactive: not deep, not unwrapped automatically.

  const value: Value = reactive({})

  const count = ref(1) value.a = count

  function handleClick () { count.value++ console.log(value.a) }

• 此时 proxy 是 unwrapped: 可以直接通过 value.a 获取到值，而不是 value.a.value

  const value: Value = shallowReactive({})

  const count = ref(1) value.a = count

  function handleClick () { count.value++ console.log(value.a) }

• 此时的 proxy 是 wrapped，需要通过 value.a.value 获取值

2. ref 与 shallowRef 的区别

• 应用于普通类型的值，ref 和 shallowRef 没有区别。

• deep, 当应用于对象时，可以通过改变属性的值来监听到对应属性值的变化，computed 也会重新计算。

• shallowRef: 只有通过 refValue.value = xxx 赋值时，才可以监听到变化，值发生改变后，computed 会重新计算。