shallowReactive
reactive() 的浅层作用形式
和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了。
<script setup>
import { isReactive, shallowReactive } from "vue";
const state = shallowReactive({
foo: 1,
nested: {
bar:2
}
})
state.foo++;
state.nested.bar++;
console.log(isReactive(state.nested.foo))
</script>
<template>
<p>foo: {{state.foo}}</p>
<input type="text" v-model="state.foo"/>
<p>bar: {{state.nested.bar}}</p>
<input type="text" v-model="state.nested.bar"/>
</template>
我在页面中加了响应式 input ,更改根级别的属性，foo会随着 input 输入的数字更改。
foo.gif
再试试根级别下的子级别属性，它不是响应式属性，不会随着输入的数字变化而变化。这也就是上面所说的 bar 值不会自动解包。
bar.gif
