• 在學習reactive和ref的時候我們說過，reactive和ref為遞歸監(jiān)聽本質(zhì)是Proxy只能監(jiān)聽到當前對象下屬性的變化，當屬性為引用數(shù)據(jù)類型時，屬性的屬性他是監(jiān)聽不到的，所以需要遞歸監(jiān)聽，那這樣又有一個問題，在我們的程序中當數(shù)據(jù)過于復雜并且我們沒有這種遞歸監(jiān)聽的需求時，這樣的操作是很消耗性能的，所以VUE還給我們提供的非遞歸監(jiān)聽的API：shallowReactive和shallowRef,只監(jiān)聽第一層數(shù)據(jù)的變化

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生成非遞歸響應(yīng)數(shù)據(jù)，只監(jiān)聽第一層數(shù)據(jù)的變化
    //在 shallowReactive 中，并沒有提供 trigger 方案來主動喚醒監(jiān)測變化
    //本質(zhì)上，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提供了一個主動觸發(fā)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生成非遞歸響應(yīng)數(shù)據(jù)，只監(jiān)聽第一層數(shù)據(jù)的變化
    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 對象，我們還可以手動去觸發(fā) ref 的變化監(jiān)聽事件來實現(xiàn)界面的改變。使用的 api 是 triggerRef
        // triggerRef(state);
        // state.value= {
        //     gf: {
        //         f: {
        //             s: {
        //                 d: 666
        //             },
        //             c: 666
        //         },
        //         b: 666
        //     },
        //     a: 666
        // }
    }

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