vue3中的shallowReactive

1、shallowReactive监听了第一层属性的值，一旦发生改变，则更新视图;其他层，虽然值发生了改变，但是视图不会进行更新

<template>
    <h3>shadowReactive:</h3>
    <p class="state1">{{state}}</p>
    <button class="btn1" @click="change1">change1</button>
    <button class="btn2" @click="change2">change2</button>
</template>

<script>
    import {shallowReactive,reactive} from 'vue'
    export default {
        name: "NavHeader",
        setup(){
            const obj = {
                a: 1,
                first: {
                    b: 2,
                    second: {
                        c: 3
                    }
                }
            };
            const state = shallowReactive(obj);
            //shadowReactive只是监听了第一层的属性变化；其他层属性变化，视图不会更新，第一层变化视图会更新
            function change1(){
                state.a = 5;
                console.log(state);//{ "a": 5, "first": { "b": 2, "second": { "c": 3 } } }
            }
            function change2(){
                state.first.b = 8
                state.first.second.c = 9
                console.log(state);  //state内容输出如下
                //Proxy {a: 5, first: {…}}
					[[Handler]]: Object
					[[Target]]: Object
					a: 5
					first:
					b: 8
					second:
					c: 9
					__proto__: Object
					__proto__: Object
					__proto__: Object
					[[IsRevoked]]: false
            }
            return {state,change1,change2}
        }
    }
</script>

<style scoped>
</style>

2、运行上面代码，模板中state的值为：

{ "a": 1, "first": { "b": 2, "second": { "c": 3 } } }

3、点击btn1,模板中state的值为：

{ "a": 5, "first": { "b": 2, "second": { "c": 3 } } }

4、接着点击btn2，模板中state的值保持不变，输出如下：

{ "a": 5, "first": { "b": 2, "second": { "c": 3 } } }

结论：
shadowReactive只是监听了第一层的属性变化，第一层属性变化，视图会更新；其他层属性变化，视图不会更新