shallowReactive和shallowRef

• 在学习reactive和ref的时候我们说过，reactive和ref为递归监听本质是Proxy只能监听到当前对象下属性的变化，当属性为引用数据类型时，属性的属性他是监听不到的，所以需要递归监听，那这样又有一个问题，在我们的程序中当数据过于复杂并且我们没有这种递归监听的需求时，这样的操作是很消耗性能的，所以VUE还给我们提供的非递归监听的API：shallowReactive和shallowRef,只监听第一层数据的变化

shallowReactive栗子

<template>
  <div class="page-wrapper">
    <p>-------------------------------shallowReactive--------------------------</p>
    <p>{{state}}</p>
    <button @click="myFn">点我一下</button>
  </div>
</template>
<script lang="js">
import { defineComponent, shallowReactive } from 'vue';
export default defineComponent({
  name: 'shallowReactive-test',
  setup(){
    //shallowReactive生成非递归响应数据，只监听第一层数据的变化
    //在 shallowReactive 中，并没有提供 trigger 方案来主动唤醒监测变化
    //本质上，shallowRef 是特殊的 shallowReactive，而 ref 是特殊的 reactive。
    let state= shallowReactive({
        gf: {
            f: {
                s: {
                    d: 4
                },
                c: 3
            },
            b: 2
        },
        a: 1
    })
    console.log('state', state);
    console.log('state.gf', state.gf)
    console.log('state.gf.f', state.gf.f)
    console.log('state.gf.f.s', state.gf.f.s)
    function myFn(){
        // state.a= 666;
        state.gf.b= 666;
        state.gf.f.c= 666;
        state.gf.f.s.d= 666;
    }

    return {
        state,
        myFn
    }
  }
  
})
</script>

shallowRef栗子

• VUE还给shallowRef提供了一个主动触发UI变化的API：triggerRef，shallowReactive是没有的大家注意一下！！！

<template>
  <div class="page-wrapper">
    <p>-------------------------------shallowRef && triggerRef--------------------------</p>
    <p>{{state}}</p>
    <button @click="myFn">点我一下</button>
  </div>
</template>
<script lang="js">
import { defineComponent, shallowRef, triggerRef} from 'vue';
export default defineComponent({
  name: 'shallowRef-test',
  setup(){
    //shallowRef生成非递归响应数据，只监听第一层数据的变化
    let state= shallowRef({
        gf: {
            f: {
                s: {
                    d: 4
                },
                c: 3
            },
            b: 2
        },
        a: 1
    })
    console.log('state', state);
    console.log('state.value', state.value);
    console.log('state.value.gf', state.value.gf)
    console.log('state.value.gf.f', state.value.gf.f)
    console.log('state.value.gf.f.s', state.value.gf.f.s)
    function myFn(){
        state.value.a= 666;
        state.value.gf.b= 666;
        state.value.gf.f.c= 666;
        state.value.gf.f.s.d= 666;
        
        //对于 shallow 过的 ref 对象，我们还可以手动去触发 ref 的变化监听事件来实现界面的改变。使用的 api 是 triggerRef
        // triggerRef(state);
        // state.value= {
        //     gf: {
        //         f: {
        //             s: {
        //                 d: 666
        //             },
        //             c: 666
        //         },
        //         b: 666
        //     },
        //     a: 666
        // }
    }

    return {
        state,
        myFn
    }
  }
  
})
</script>