Vue3中shallowReactive和shallowRef对数据进行非深度监听

1.Vue3 中 ref 和 reactive 都是深度监听

默认情况下，
无论是通过 ref 还是 reactive 都是深度监听。
深度监听存在的问题：
如果数据量比较大，非常消耗性能。
有些时候我们并不需要对数据进行深度监听。
这个时候就没有必要使用ref和reactive

2.说明 ref 对数据进行深度监听

<template>
 <div>
    <div>
      <li>{{state}}</li>
       <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=ref({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
      state.value.b.c.d1.f1.f1="f1f1f1f1"
     }
     return {state,func1}
  },
}
</script>

 

通过上面的代码，我们发现无论写多少层数据；
数据层级有多深，ref始终会对数据进行深度监听。
这显然不是我们需要的。
我们迫切需要对数据进行非深度监听。
这个时候，我们的shallowReactive和shallowRef就出场了。

3.使用 shallowReactive 非深度监听

前面我们说道：
默认情况下，无论是通过 ref 还是 reactive 都是深度监听。
所以Vue3为我们提供了，shallowReactive进行非深度监听。
shallowReactive只会包装第一层的数据
默认情况它只能够监听数据的第一层。
如果想更改多层的数据，
你必须先更改第一层的数据。
然后在去更改其他层的数据。
这样视图上的数据才会发生变化。

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {shallowReactive} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=shallowReactive({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
       console.log( state );//只有第一层
       console.log( state.b.b1 )
       console.log(state.b.c )
       console.log( state.b.c.d1 )
       console.log( state.b.c.d1.f1 );
      //  直接更改其他层的数据，会失败的哈
      // state.b.c.d1.f1.f1="f1f1f1f1"

      // 先更改第一层，然后在更改其他层就会成功
      state.a="啊啊啊"
      state.b.c.d1.f1.f1="f1f1f1f1"

     }
     return {state,func1}
  },
}
</script>

4.使用 shallowRef 进行非深度监听

注意点：如果是通过shallowRef创建的数据。
那么Vue监听的是.value 变化。
并不是第一层的数据的变化。
因此如果要更改shallowRef创建的数据。
应该xxx.value={}

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {shallowRef} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=shallowRef({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
       //  通过 state.value的方式直接去更改
       state.value={
          a:'我是a',
          b:{
            b1:"我是b1",
            c:{
              c1:"我是c1",
              d1:{
                e1:"我是e1",
                f1:{
                  f1:"f1"
                }
              }
            }
          }
       }

     }
     return {state,func1}
  },
}
</script>

折叠

5.triggerRef更改shallowRef创建的数据

triggerRef 可以直接去更改
shallowRef创建数据的某一层。
需要我们注意的是：
vue3中值提供了triggerRef这个方法，
但是并没有提供triggerReactive的方法。
也就是说triggerRef 【不可以】去更改
shallowReactive创建的数据

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {shallowRef,triggerRef} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=shallowRef({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
       //  直接更改你需要修改某一层的数据
       state.value.b.c.d1.f1="我是f1";
       triggerRef(state)
     }
     return {state,func1}
  },
}
</script>

通过上面的几个例子
我们知道一般情况下。我们使用ref和reactive即可。
只有在监听的数据量比较大的时候。
才使用shallowReactive和shallowRef。